<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动态表格</title>
<style>
table {
border: 1px solid;
margin: auto;
width: 500px;
}
td, th {
text-align: center;
border: 1px solid;
}
div {
text-align: center;
margin: 50px;
}
</style>
</head>
<body>
<div>
<label for="number"></label><input type="text" id="number" placeholder="请输入编号">
<label for="name"></label><input type="text" id="name" placeholder="请输入姓名">
<label for="gender"></label><input type="text" id="gender" placeholder="请输入性别">
<input type="button" value="添加">
</div>
<div>
<table>
<caption>学生信息表</caption>
<tr onmouseover="show01(this)" onmouseout="show02(this)">
<td><input type="checkbox" id="firstCb" onclick="test(this)"></td>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>操作</th>
</tr>
</table>
<div>
<input type="button" id="selectAll" value="全选">
<input type="button" id="unSelectAll" value="全不选">
<input type="button" id="selectRev" value="反选">
</div>
</div>
</body>
<script >
window.onload
{
document.getElementsByTagName("input")[3].onclick = function () {
let number = document.getElementById("number").value;
let name = document.getElementById("name").value;
let gender = document.getElementById("gender").value;
document.getElementsByTagName("table")[0].innerHTML += "<tr onmousemove='show01(this)' onmouseout='show02(this)'>" + "<td>" + "<input type=\"checkbox\" name=\"cb\">" + "</td>" + "<td>" + number + "</td>" + "<td>" + name + "</td>" + "<td>" + gender + "</td>" + "<td>" + " <a href=\"javascript:void (0)\" onclick=\"del(this)\">删除</a>" + "</td>" + "</tr>";
}
function del(obj) {
const table = obj.parentNode.parentNode.parentNode;
const tr = obj.parentNode.parentNode;
table.removeChild(tr);
}
//全选
document.getElementById("selectAll").onclick = function () {
const cbs = document.getElementsByName("cb");
for (let cbElement of cbs) {
cbElement.checked = true;
}
}
//不全选
document.getElementById("unSelectAll").onclick = function () {
const cbs = document.getElementsByName("cb");
for (let cbElement of cbs) {
cbElement.checked = false;
}
}
//反选
document.getElementById("selectRev").onclick = function () {
const cbs = document.getElementsByName("cb");
for (let cbElement of cbs) {
cbElement.checked = !cbElement.checked;
}
}
function test(obj) {
const cbs = document.getElementsByName("cb"); //在table中不能获取到未来的元素，解决的方法：给该元素绑定一个点击事件，而获取其元素再绑定一个事件不可信
for (let cb of cbs) {
cb.checked=obj.checked;
}
}
//表格根据鼠标移动，动态的变色
function show01(obj) {
obj.style.background = "pink";
}
function show02(obj) {
obj.style.background = "white";
}
}
</script>
</html>
浙公网安备 33010602011771号