首先呢我们先说一下功能的具体要求:
- 点击添加按钮会添加一行
- 点击删除会删除一行,序号不变,再次点击添加时,内容在删除的值的基础上加100
- 奇数是白色,偶数是粉色
HTML代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格隔行换色功能</title>
<link rel="stylesheet" href="./css/选项卡.css">
</head>
<body>
<table border="1" cellspacing="0">
<thead>
<tr align="center">
<th width="50px">序号</th>
<th width="80px">内容</th>
<th width="100px">操作</th>
</tr>
</thead>
<tbody align="center">
<tr>
<td>1</td>
<td>data</td>
<td>
<button onclick="del(event)">删除</button>
</td>
</tr>
</tbody>
</table>
<button id="box" style="margin-left: 18%;">添加</button>
<script src="js/表格隔行换色功能.js"></script>
</body>
</html>
JS代码
let box = document.getElementById('box');
// 获取表格的身体
let thbody = document.getElementsByTagName('tbody')[0];
// 获取按钮
let but = document.getElementsByTagName('button')[0];
// 定义一个内容初始值为100
// tr是行,td是格。
let content = 100;
// 给添加行绑定点击事件
box.onclick = function() {
// 获取内部tr
let TR = document.getElementsByTagName('tr')[0];
let on = document.children;
// 获取内部格td
let TD = document.getElementsByTagName('td')[0];
let thbodytoo = thbody.children;
// 创建新的tr标签
let onetr = document.createElement('tr');
// 循环格的长度当点击box时创建行,格
for (let k = 0; k < 3; k++) {
// 创建新的td标签
let onetd = document.createElement('td');
if (k == 0) {
onetd.innerHTML = thbodytoo.length + 1
}
onetr.appendChild(onetd);
if (k == 1) {
onetd.innerHTML = content;
content += 100;
}
thbody.appendChild(onetr);
if (k == 2) {
onetd.innerHTML = '<button onclick="del(event)">删除</button>';
}
}
// 在点击这里调用换色函数
color()
}
// 换色
function color() {
// 循环整个表格内容
let thbodytoo = thbody.children;
// 循环判断行颜色
for (let i = 0; i < thbodytoo.length; i++) {
if (i % 2 != 0) {
thbodytoo[i].style.backgroundColor = 'hotpink';
} else if (i % 2 != 1) {
thbodytoo[i].style.backgroundColor = 'white';
}
}
}
// 删除
function del(e) {
let img = e.target;
let img_one = img.parentElement.parentElement;
thbody.removeChild(img_one);
sort()
color()
}
// 排序
function sort() {
let thbodytoo = thbody.children;
for (let b = 0; b < thbodytoo.length; b++) {
let item = thbodytoo[b].children[0];
item.innerHTML = b + 1;
}
}
以上就是如何用JS实现表格隔行换色功能。