本次練習(xí)主要涉及如下幾個主要知識點的應(yīng)用：
- 復(fù)選框的勾選與取消
- 鼠標(biāo)移入移出操作
- className 的設(shè)置
- 父節(jié)點的獲取及子節(jié)點的刪除
練習(xí)1.gif
完整代碼
JavaScript 原生代碼
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>JavaScript實例練習(xí)-JS 原生代碼</title>
<style>
table {
height: 50px;
margin: 0 auto;
}
th {
font-size: 14px;
font-weight: 700;
width: 150px;
height: 40px;
}
td {
width: 150px;
text-align: center;
}
.even {
background: #b4eeb4;
}
.odd {
background: #cae1ff;
}
.active {
background: #ff6347;
}
.lastline {
background: #fff;
height: 40px;
}
#cbk {
font-size: 12px;
}
</style>
<script>
window.onload = function() {
setRowsBgColor();
var oInput = document.getElementsByTagName("input");
var btnDel = document.getElementById("del");
var i = 0;
// 全選按鈕的點擊操作
oInput[0].onclick = function() {
// 循環(huán) input 對象法焰，排除前3個及最后1個
for (i = 3; i < oInput.length - 1; i++) {
oInput[i].checked = true; // 全部勾選
}
};
// 全不選按鈕的點擊操作
oInput[1].onclick = function() {
for (i = 3; i < oInput.length - 1; i++) {
oInput[i].checked = false; // 全部不勾選
}
};
// 反選按鈕的點擊操作
oInput[2].onclick = function() {
for (i = 3; i < oInput.length - 1; i++) {
oInput[i].checked = !oInput[i].checked; // 反選
}
};
// 刪除按鈕
btnDel.onclick = function() {
if (!confirm("您確定刪除所選用戶信息嗎？")) return; // 提示用戶是否刪除倔毙，取消則返回不操作
var userNodes = document.getElementsByName("user"); // 獲取 tbody 下所有 input 對象
for (var i = 0; i < userNodes.length; i++) {
// 當(dāng)復(fù)選框被勾選時
if (userNodes[i].checked) {
var trNodes = userNodes[i].parentNode.parentNode; // 獲取復(fù)選框元素父節(jié)點的父節(jié)點
trNodes.parentNode.removeChild(trNodes); // 移除上述節(jié)點即 tr
i--;
}
}
setRowsBgColor();
};
};
// 設(shè)置奇數(shù)行埃仪、偶數(shù)行及最后一行的背景色，并實現(xiàn)鼠標(biāo)移入后行背景色
function setRowsBgColor() {
var tbNode = document.getElementById("tabInfo"); // 獲取 tbody 對象
var rowsNode = tbNode.rows; // 獲取 tbody 下所有行對象
var name;
// 循環(huán) tbody 下所有航元素
for (var i = 0; i < rowsNode.length; i++) {
if (i % 2 == 1) {
rowsNode[i].className = "odd"; // 奇數(shù)行
} else {
rowsNode[i].className = "even"; // 偶數(shù)行
}
rowsNode[i].onmouseover = function() {
name = this.className; // 保存鼠標(biāo)移入之前的 className
this.className = "active";
};
rowsNode[i].onmouseout = function() {
this.className = name; // 設(shè)置之前保存的 className
};
}
}
</script>
</head>
<body>
<table border="1" id="tbl">
<thead>
<tr>
<th id="cbk">
<input id="checkAll" type="button" name="" value="全選" />
<input id="uncheckAll" type="button" name="" value="全不選" />
<input id="inverse" type="button" name="" value="反選" />
</th>
<th>編號</th>
<th>姓名</th>
<th>年齡</th>
</tr>
</thead>
<tbody id="tabInfo">
<tr>
<td><input type="checkbox" name="user" /></td>
<td>1</td>
<td>張三</td>
<td>22</td>
</tr>
<tr>
<td><input type="checkbox" name="user" /></td>
<td>2</td>
<td>李四</td>
<td>25</td>
</tr>
<tr>
<td><input type="checkbox" name="user" /></td>
<td>3</td>
<td>王五</td>
<td>27</td>
</tr>
<tr>
<td><input type="checkbox" name="user" /></td>
<td>4</td>
<td>趙六</td>
<td>29</td>
</tr>
<tr>
<td><input type="checkbox" name="user" /></td>
<td>5</td>
<td>田七</td>
<td>30</td>
</tr>
<tr>
<td><input type="checkbox" name="user" /></td>
<td>6</td>
<td>汾九</td>
<td>20</td>
</tr>
</tbody>
<tfoot>
<tr class="lastline">
<td colspan="4"><input id="del" type="button" value="刪除" /></td>
</tr>
</tfoot>
</table>
</body>
</html>
jQuery 代碼
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>JavaScript實例練習(xí)-JQ 代碼</title>
<script src="../../scripts/lib/jquery-3.3.1.js"></script>
<style>
table {
height: 50px;
margin: 0 auto;
}
th {
font-size: 14px;
font-weight: 700;
width: 150px;
height: 40px;
}
td {
width: 150px;
text-align: center;
}
.even {
background: #b4eeb4;
}
.odd {
background: #cae1ff;
}
.active {
background: #ff6347;
}
.lastline {
background: #fff;
height: 40px;
}
#cbk {
font-size: 12px;
}
</style>
<script>
$(function() {
setRowColor();
// 設(shè)置奇數(shù)行陕赃、偶數(shù)行及最后一行的背景色卵蛉，并實現(xiàn)鼠標(biāo)移入后行背景色
function setRowColor() {
$("tbody tr").removeClass("even odd"); // 移除 tbody tr 之前的 className
$("tbody tr:even").addClass("even"); // 偶數(shù)行
$("tbody tr:odd").addClass("odd"); // 奇數(shù)行
}
var name;
// 實現(xiàn)移入移出 tr 的 className
$("tbody tr").hover(
function() {
name = this.className; // 保存移入前的 className
$(this).addClass("active");
},
function() {
$(this).removeClass("active");
$(this).addClass(name); // 設(shè)置為之前保存的 className
}
);
// 全選按鈕的點擊操作
$("#checkAll").click(function() {
$("tbody input").prop("checked", true); // 全部勾選
});
// 全不選按鈕的點擊操作
$("#uncheckAll").click(function() {
$("tbody input").prop("checked", false); // 全部不勾選
});
// 反選按鈕的點擊操作
$("#inverse").click(function() {
// 循環(huán) tbody 下所有 input 元素
$("tbody input").each(function() {
$(this).prop("checked", !$(this).prop("checked")); // 反選
});
});
// 刪除按鈕的點擊操作
$("#del").click(function() {
if (!confirm("確定刪除選中用戶信息嗎？")) return; // 提示用戶是否刪除么库，取消則返回不操作
$("tbody input").each(function() {
if ($(this).prop("checked")) {
$(this)
.parent()
.parent()
.remove(); // 獲取父節(jié)點的父節(jié)點即 tr 節(jié)點
}
setRowColor(); // 重新設(shè)置 tbody 下 tr 的 className
});
});
});
</script>
</head>
<body>
<table border="1" id="tbl">
<thead>
<tr>
<th id="cbk">
<input id="checkAll" type="button" name="" value="全選" />
<input id="uncheckAll" type="button" name="" value="取消" />
<input id="inverse" type="button" name="" value="反選" />
</th>
<th>編號</th>
<th>姓名</th>
<th>年齡</th>
</tr>
</thead>
<tbody id="info">
<tr>
<td><input type="checkbox" name="user" /></td>
<td>1</td>
<td>張三</td>
<td>22</td>
</tr>
<tr>
<td><input type="checkbox" name="user" /></td>
<td>2</td>
<td>李四</td>
<td>25</td>
</tr>
<tr>
<td><input type="checkbox" name="user" /></td>
<td>3</td>
<td>王五</td>
<td>27</td>
</tr>
<tr>
<td><input type="checkbox" name="user" /></td>
<td>4</td>
<td>趙六</td>
<td>29</td>
</tr>
<tr>
<td><input type="checkbox" name="user" /></td>
<td>5</td>
<td>田七</td>
<td>30</td>
</tr>
<tr>
<td><input type="checkbox" name="user" /></td>
<td>6</td>
<td>汾九</td>
<td>20</td>
</tr>
</tbody>
<tfoot>
<tr class="lastline">
<td colspan="4"><input id="del" type="button" value="刪除" /></td>
</tr>
</tfoot>
</table>
</body>
</html>
