您的位置：首页 > Web前端 > JQuery

Jquery 的添加全选删除全删

2017-12-10 20:26 330 查看

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title></title>
</head>
<script type="text/javascript" src="js/jquery-1.11.0.min.js" charset="UTF-8"></script>

<body>
用户名：<input type="text" id="name" name="name" /><br/> 密码：
<input type="password" id="pass" name="pass" /><br/> 邮箱
<input type="email" id="ema" name="ema" /> <br/>
<input type="button" id="bnt" value="添加" />
<input type="button" id="shanchu" value="删除" />
<table border="1px" cellspacing="0" cellpadding="0" id="tabb">
<tr>
<th><input type="checkbox" id="cke" /></th>
<th>用户名</th>
<th>密码</th>
<th>邮箱</th>
<th>操作</th>
</tr>
</table>

</body>
<script type="text/javascript">
$("#bnt").click(function() {
var name = $("#name").val();
var pass = $("#pass").val();
var ema = $("#ema").val();
var tabb = $("#tabb");

tabb.append("<tr><td><input type='checkbox' name='cc'/></td><td>" + name + "</td><td>" + pass + "</td><td>" + ema + "</td><td><a href='#' onclick='dele(this)'>删除</a></td></tr>")

});

function dele(t) {
t.parentNode.parentNode.remove();

}

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

$("#shanchu").click(function() {

var cbs = $("input[type=checkbox]:checked");

if(cbs.length == 0) {
alert("請至少選擇一個")
return
}
for(var i = 0; i < cbs.length; i++) {
var cb = cbs[i];
cb.parentNode.parentNode.remove();
}

if(cbs.length == 1) {

$("#table").empty();
}

});
</script>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

Jquery 的 添加 全选 删除 全删

Jquery 的添加全选删除全删