jQuery動態新增表格資料的基本使用（全選-批量刪除）程式碼
阿新 • • 發佈：2019-02-12
<!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>
<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>