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

JQuery进行添加删除

2017-12-05 16:17 399 查看

<!DOCTYPE html>

<html>

<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-1.11.0.min.js"></script>
<script>
$(function() {
// $(".btn_del").on('click', function() {
// alert("123");
// })
$(document).on('click', '.btn_del', function() {
$(this).parent().parent().remove()
var tr = $("tr");
if(tr.length == 1) {
$(".table").hide()
}
})

})
</script>
<style>
.table {
width: 700px;
}

.table tr th {
text-align: center;
color: red;
background-color: yellow;
}

.table td {
border: 1px solid black;
text-align: center;
width: 140px;
}
</style>
</head>

<body>
<hr /> 用户
<input type="text" class="user" id="user" />密码<input type="password" class="pwd" id="pwd" /> 邮箱
<input type="text" class="eml" id="eml" /><input type="button" id="btn" value="添加" />
<input type="button" value="批量删除" id="ip_del" />
<hr />
<table class="table" cellpadding="0px" cellspacing="0px">
<tr id="tr">
<th><input type="checkbox" id="cb_one" class="cb_one" /></th>
<th>用户名</th>
<th>密码</th>
<th>邮箱</th>
<th>操作</th>
</tr>
</table>
<script>
$(".table").hide();
$("#btn").click(function() {
$(".table").show();
var user = $("#user").val();
var pwd = $("#pwd").val();
var eml = $("#eml").val();
var $tr = $("<tr><td><input type='checkbox' class='cb_ins'/></td><td>" + user + "</td><td>" + pwd + "</td><td>" + eml + "</td><td><button class='btn_del'>删除</button></td></tr>")
$(".table").append($tr);
/*$(".btn_del").on('click', function() {
$(this).parent().parent().remove()
})*/
})
var flag = true;
$("#cb_one").click(function() {
var aa = $("input[type=checkbox]")
for(i = 0; i < aa.length; i++) {
aa[i].checked = flag;
}
flag = !flag;
})
$("#ip_del").click(function() {
var $tr = $("input[type=checkbox]:checked");
if($tr.length == 0) {
alert("至少选一行")
}
for(i = 0; i < $tr.length; i++) {
if(i == 0) {
var td = $($tr[i])
var aa = td.parent().parent();
if(aa.attr("id") != "tr") {
alert(aa)
td.parent().parent().remove();
}
} else {
$tr[i].parentNode.parentNode.remove();
}

}
var $tr = $("input[type=checkbox]");
if($tr.length == 1) {
$(".table").hide();
}
})
</script>
</body>

</html>

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

标签：

相关文章推荐

新的分享

章节导航