隔行换色制作
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
* {
padding: 0;
margin: 0;
}
td {
width: 80px;
height: 20px;
text-align: center;
}
</style>
</head>
<body>
<table border="1" cellspacing="0">
<thead>
<tr>
<th>序号</th>
<th>内容</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>100</td>
<td><button>删除</button></td>
</tr>
</tbody>
</table>
<button class="add">添加行</button>
<script>
//获取添加行的按钮
let add = document.getElementsByClassName('add')[0];
//获取第一个tr
let row = document.getElementsByTagName('tr')[0];
//获取表格的身体部分
let tbody = document.getElementsByTagName('tbody')[0];
//获取表格里面的td
let td = document.getElementsByTagName('td');
//设置一个变量为100
let num = 100;
//给添加行的按钮添加一个点击事件
add.onclick = function() {
//创建一个新的tr标签
let newtr = document.createElement('tr');
//创建一个新的td标签
let newtd = document.createElement('td');
//把创建的td标签放到新创建的tr标签里面
newtr.appendChild(newtd);
//在创建一个新的td标签
let data = document.createElement('td');
//每次添加都让num+100
num += 100;
//把变量插入到新建的td里面
data.innerHTML = num;
//在把新建的td插入到tr里面
newtr.appendChild(data);
//在创建一个td标签
let but_td = document.createElement('td');
//在创建一个按钮
let btn = document.createElement('button');
//在往新建的按钮里面插入字符串
btn.innerHTML = '删除';
//打印新的tr
console.log(newtr);
//把新建的按钮插入到新建的td里面
but_td.appendChild(btn);
//在把新建的td插入到tr标签里面
newtr.appendChild(but_td);
//在把tr插入到表格的身体里面
tbody.appendChild(newtr);
//排序和换色函数
sort();
}
//排序和换色函数
function sort() {
//创建一个变量它包含的是表格身体里面的子元素
let trs = tbody.children;
//for循环的运行次数是看表格身体里面有几个子元素
for (let i = 0; i < trs.length; i++) {
//创建一个变量让循环改变一行的第一个td里面的对西
let istd = trs[i].children[0];
//然后把刚才生成的变量插入的HTML里面每次运行是当前循环次数+1
istd.innerHTML = i + 1;
//判断i%2是否=0，如果为0这一行颜色为白色
if (i % 2 == 0) {
trs[i].style.background = 'white';
} else {
//否则为粉色
trs[i].style.background = 'pink';
}
}
}
//给表格身体绑一个监听函数
tbody.addEventListener('click', function(e) {
//设置一个变量，等于e的子元素
let target = e.target;
//打印变量看看是否能用有没有报错
console.log(target);
//判断变量里面的内容是否为删除
if (target.innerHTML == '删除') {
//打印看是否运行
console.log(1);
//如果是就找它的爷爷
let istr = target.parentElement.parentElement;
//打印看是否执行
console.log(istr);
//在表格身体里面点击删除一行
tbody.removeChild(istr);
}
//排序和换色函数
sort();
})
</script>
</body>
</html>
