首先要想的是,点击添加行的时候会新增一个tr标签,里面是内容,其次就是换过行之后,要判断是否要换颜色,隔一行就换颜色,所以可以用i % 2 == 1去判定是否需要换颜色,里面有具体的解释
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table {
width: 300px;
border: 1px #525252 solid;
}
td {
border: 1px #525252 solid;
text-align: center;
}
</style>
</head>
<body>
<table cellspacing="0">
<thead>
<tr>
<th>序号</th>
<th>内容</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>1</td>
<td>
<!-- 按钮 -->
<button>删除</button>
</td>
</tr>
</tbody>
</table>
<button id="row">添加行</button>
<script>
// 获取添加行按钮标签
let row = document.getElementById('row');
// 获取thead标签
let thead = document.getElementsByTagName('thead')[0];
// 获取tbody标签
let tbody = document.getElementsByTagName('tbody')[0];
// 定义内容变量,表示为每一行显示的内容,初始为 100
let content = 51;
// 获取删除按钮
let button = document.getElementsByTagName('button')[0];
// 给添加行绑定点击事件
row.addEventListener('click', function() {
// 通过thead标签获取内部tr
let theadtr = document.getElementsByTagName('tr')[0];
// 获取tr里th的数量
let theadth = theadtr.getElementsByTagName('th');
// 创建一个新的tr标签
let newtr = document.createElement("tr");
// 循环th的数量
for (let i = 0; i < theadth.length; i++) {
// 创建td标签
let newtd = document.createElement("td");
// 通过tbody获取里边tr的数量,为了设置序号
let tbodytr = tbody.children;
// 判断i下标是否为0,是不是第一个td标签
if (i == 0) {
// 让这个td标签的内容为 tr数量长度+1 定义序号
newtd.innerHTML = tbodytr.length + 1
}
// 判断i下标是否等于1 ,是否为第二个td
if (i == 1) {
// 设置内容为 内容变量
newtd.innerHTML = content;
// 内容变量 += 50
content += 50;
}
// 判断i下标是否为th的长度-1 是否为最后一个{
if (i == theadth.length - 1) {
// 让这个td的内容为 "<button>删除</button>"
newtd.innerHTML = "<button>删除</button>";
}
// 把当前新创建的td标签添加到新的tr标签内
newtr.appendChild(newtd);
}
// 把这个新创建的tr添加到tbody标签内
tbody.appendChild(newtr);
// 调用隔行换色函数
color();
})
// 创建隔行换色函数{
function color() {
// 获取当前tbody内tr的数量
let trs = tbody.children;
// 循环行数{
for (let i = 0; i < trs.length; i++) {
// 判断当前下标 % 2 取余数 是否等于 1 ,等于1则为粉色,否为白色{
if (i % 2 == 1) {
// 给奇数这一行的颜色设置为粉色pink
trs[i].style.backgroundColor = "pink";
} else {
// 否则设置为白色的
trs[i].style.backgroundColor = "white";
}
}
}
// 给删除按钮绑定点击事件
tbody.addEventListener('click', function(e) {
let target=e.target||e.srcElement;
if(target.tagName.toLowerCase()=='button'){
// 获取当前按钮所在的tr
let tr = target.parentNode.parentNode;
// 移除当前tr
tbody.removeChild(tr);
// 重新排序
sort();
// 调用隔行换色函数
color();
}
})
// 创建序号排序函数
function sort() {
// 一个tbody获取里边的tr,能看到现在一共有多少行
let tr = tbody.children;
// 循环行数{
for (let i = 0; i < tr.length; i++) {
// 获取当前这一行里边的第一个td
let td = tr[i].children[0];
// 修改这个td的内容为 i + 1,为了重新设定序号
td.innerHTML = i + 1;
}
}
</script>
</body>
</html>