使用Jquery实现如图表格的增删改查操作
效果图:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="button" value="删除全部" id="dqb"/><br />
姓名:<input type="text" id="name"/><br />
性别:<select id="sex">
<option value ="男">男</option>
<option value ="女">女</option>
</select><br />
年龄:<input type="text" id="age"/>
<input type="button" value="添加"><input type="button" value="确认添加" class="truexiugai" style="display: none;"/>
<table border="1px">
<tr>
<td>ID</td>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
<td>操作</td>
</tr>
</table>
</body>
<script src="../js/jquery-3.4.1.js"></script>
<script type="text/javascript">
var i=1;
$(function(){
$("input[value='添加']").click(function(){
//获得用户的姓名
var name=$("#name").val();
//获得用户的年龄
var age=$("#age").val();
var sex=$("option").val();
$("<tr>").append($("<td>").text(i++))
.append($("<td>").text(name))
.append($("<td>").text(sex))
.append($("<td>").text(age))
.append($("<td>").append($("<button>").text("删除")).append($("<a href='#' class='bj'>").text("编辑")))
.appendTo($("table"));
$("button").click(function(){
$(this).parent().parent().remove();
});
//全部删除
$("#dqb").click(function(){
$("table>tbody>tr:gt(0)").remove();
});
$(".bj","td").click(function(){
$("input[value='添加']").show()
var name =$(this).parent().siblings("td:nth-child(2)").text();
var sex = $(this).parent().siblings("td:nth-child(3)").text();
var age = $(this).parent().siblings("td:nth-child(4)").text();
$("#name").val(name);
$("#sex").val(sex);
$("input[value='添加']").hide();
$(".truexiugai").show();
var that=$(this)
//点击确认修改时
$(".truexiugai").on("click",function(){
// 获取信息
var name=$("#name").val();
var sex=$("#sex").val();
var age=$("#age").val();
that.parent().siblings("td:nth-child(2)").text(name);
that.parent().siblings("td:nth-child(3)").text(sex);
that.parent().siblings("td:nth-child(4)").text(age);
});
});
});
});
</script>
</html>