全选全不选增删_为什么全选时删除元素全选不会选中状态不会改变-优快云博客

本文介绍了一种使用jQuery简化网页表格操作的方法，包括如何通过单击按钮来添加新行，并实现了批量删除功能及全选/全不选选项。此方案适用于需要动态管理表格数据的网页应用。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//页面加载成功
$(function() {
//全选和全不选
$("#checkAll").change(function() {
//获取全选元素的选中状态
var $isChecks = this.checked;
//alert($isChecks);
//遍历下面所有的CheckBox
$("input[name='ck']").each(function () {
$(this).prop("checked",$isChecks);
})
});
//批量删除
$("#btn_delAll").click(function () {
//获取到选中的元素
var $del_check = $("input:checked[name='ck']");
//判断选中元素的长度
if ($del_check.length==0) {
alert("请选择要删除的数据");
return;
}
//获取所有选中的 name = ck 的元素,,,进行删除
$del_check.parent().parent().remove();
//删除以后,隐藏掉表格
$("table")[0].style.display="none";
});
//点击添加
$("#btn_add").click(function() {
//显示表格
$("table")[0].style.display="block";
//获取到当前table下tr的数量
var $rows = $("table tr").length;
//创建新的一行
var $tr = $("<tr></tr>");
//创建一列
var $td = $("<td></td>");
//向这个列添加追加元素----CheckBox
$td.append($("<input type='checkbox' name='ck'/>"));
//把这个列追加到这一行上
$tr.append($td);
//获取到表单下,,所有input type=text的元素
var $inputs = $("form :input[type='text']");
for(var i = 0; i < $inputs.length; i++) {
//根据获取到的数据数量,,,创建列
var $new_td = $("<td></td>");
//alert($inputs[i]); -----获取到的是js的元素所有下面用value不用val()
$new_td.text($inputs[i].value);
//把元素添加到tr上
$tr.append($new_td);
}
//添加删除按钮
var $new_td = $("<td><button class='delet'>删除</button></td>");
$tr.append($new_td);
//添加到table中
$("table").append($tr);
//删除行
$(".delet").click(function() {
$(this).parent().parent().remove();
});
});

});
</script>
</head>

<body>
<form>
<fieldset id="">
<legend>用户注册页面</legend>
<label>
用户:<input type="text" />
</label>
<label>
密码:<input type="text" />
</label>
<label>
邮箱:<input type="text" />
</label>
<input type="button" id="btn_add" value="添加" />
</fieldset>
</form>

<table border="1px solid" width="400px" style="display: none;">
<tr>
<td colspan="5">
<button id="btn_delAll">批量删除</button>
</td>
</tr>
<tr style="background-color: yellow;color: red;">
<th><input type="checkbox" id="checkAll" />全选/全不选</th>
<th>用户</th>
<th>密码</th>
<th>邮箱</th>
<th>操作</th>
</tr>
</table>
</body>

</html>