隔行换色制作
<!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>
