通过jquery实现对表格数据的操作,实现数据的增加,删除以及对input框输入内容的保存。
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>节点操作</title>
<script src="./js/jquery.min.js"></script>
<style>
#table1 {
width: 600px;
margin: 100px auto;
text-align: center;
}
input {
width: 120px;
height: 22px;
display: block
}
</style>
<script>
$(function () {
//添加
$(".add").click(function () {
$(`<tr>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
<td>
<button class="del">删除</button>
</td>
<td>
<button class="save">保存</button>
</td>
</tr>`).appendTo("#table1");
})
//删除
$("table#table1").on("click", ".del", function () {
$(this).parent().parent().remove();
//或者 $(this).parents("tr").remove();
})
//保存
$("table#table1").on("click", ".save", function () {
var tds = $(this).parent().parent().find("td");
tds.each(function (index) {
var inp = tds.eq(index).find("input");
var inp_val = inp.val();
inp.hide();
tds.eq(index).html(inp_val);
})
//或者
// for(var i = 0; i < tds.length; i++){
// var inp = tds.eq(i).find("input");
// var inp_val = inp.val();
// inp.hide();
// tds.eq(i).html(inp_val);
// }
})
})
</script>
</head>
<body>
<table id="table1" border="1" cellpadding="0" cellspacing="0">
<tr>
<td colspan="5">
<button class="add">添加</button>
</td>
</tr>
<tr>
<td>姓名</td>
<td>年龄</td>
<td>班级</td>
<td colspan="2">操作</td>
</tr>
</table>
</body>
</html>
效果: