jQuery动态添加表格数据的基本使用（全选-批量删除）代码

来源：互联网发布：mysql 1418 编辑：程序博客网时间：2024/05/22 02:24

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />

<title></title>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<style>
.tt {
background-color: yellow;
color: red;
text-align: center;
}
</style>
</head>

<body>
用户名：<input type="text" id="name" /> 密码：
<input type="password" id="pwd" /> 邮箱：
<input type="email" id="email" />
<input type="button" id="add" value="添加" />
<input type="button" id="deleteall" value="批量删除" />

<table border="1" cellspacing="0" width="500px" height="30px" id="ta">
<tr class="tt">
<td><input type="button" id="qx" value="全选/全不选" /></td>
<td>用户名</td>
<td>密码</td>
<td>邮箱</td>
<td>操作</td>

</tr>

</table>

<script type="text/javascript">
$("#add").click(function() {
var name = $("#name").val();
var pwd = $("#pwd").val();
var ema = $("email").val();

var tab = $("#ta");
tab.append("<tr><td><input type='checkbox' id='cbx'></td><td>" + name + "</td><td>" + pwd + "</td><td>" + ema + "</td><td><input type='button' id='shan' onclick='shan(this)' value='删除'></td></tr>")

})

//删除一行
function shan(s) {
s.parentNode.parentNode.remove();
}

//批量删除
$("#deleteall").click(function() {
//获取标签
var ck = $("input[type=checkbox]:checked");
if(ck.length == 0) {
alert("至少选择一条");
return
}

for(var i = 0; i < ck.length; i++) {
var ckk = ck[i];
ckk.parentNode.parentNode.remove();
}
})

//全选-全不选
var flag = true;
$("#qx").click(function() {
var cb = $("input[type=checkbox]")
for(var i = 0; i < cb.length; i++) {
cb[i].checked = flag;
}
flag = !flag
})
</script>

</body>

</html>

阅读全文

0 0