本文演示了如何使用jQuery实现表格的添加和删除功能。通过添加按钮，可以将输入框中的姓名、年龄和地址信息添加到表格中。同时提供了全选和批量删除功能，点击批量删除按钮时，会移除选中的表格行。此外，单击某行的删除链接可删除该行。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/jquery-3.2.1.min.js"></script>
<style type="text/css">
table{
width: 800px;
border-collapse: collapse;
}
</style>
</head>
<body>
<table>
<tr>
<td>姓名：<input id="realName" name="realName" type="text"></td>
<td>年龄：<input id="age" name="age" type="text"></td>
<td>地址：<input id="address" name="address" type="text"></td>
<td><input value="添加" type="button" onclick="add()">
<input value="批量删除" type="button" onclick="delBatch()">
</td>
</tr>
</table>
<table border="1">
<thead>
<tr>
<td><input id="checkall" type="checkbox" onchange="checkAll(this)"></td>
<td>姓名</td>
<td>年龄</td>
<td>地址</td>
<td>操作</td>
</tr>
</thead>
<tbody id="mytb">
<tr>
<td><input type="checkbox"></td>
<td>王五</td>
<td>30</td>
<td>郑州</td>
<td><a href="javascript:void(0)" onclick="del(this)">删除</a></td>
</tr>
</tbody>
</table>
<script>
//添加
function add() {
//追加table表的数据
var realName = $('#realName').val();
var age = $('#age').val();
var address = $('#address').val();
//把创建的值存入下面的表格中
var traa = $("<tr>"
+"<td><input type=\"checkbox\"></td>"
+"<td>"+realName+"</td>"
+"<td>"+age+"</td>"
+"<td>"+address+"</td>"
+"<td><a href=\"javascript:void(0)\" onclick=\"del(this)\">删除</td>"
+"</tr>");
$('#mytb').append(traa);
}
//删除
function del(obj){
$(obj).parent().parent().remove();
}
//全选
$("#checkall").click(function() {
$.each($('table tr td>input'), function(index, value) {
console.log($(this).val() )
$(this).prop('checked',true)
})
})
//批量删除
function delBatch(){
$("tbody input:checked").parent().parent().remove();
}
</script>
</body>
</html>
扫一扫
1478
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
