大家好，今天来学习的是增加表单并且使他们每隔一行变色
先让大家看下下效果图
如上图所示，这就是我们今天需要完成的效果
我们先写一个表格并且修改一下他们的样式
//样式 <style> table { width: 300px; border: 1px #525252 solid; } th, td { border: 1px #525252 solid; text-align: center; } </style>
//表格 <table cellspacing="0"> <thead> <tr> <th>序号</th> <th>内容</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>data</td> <td> <button>删除</button> </td> </tr> </tbody> </table>
接下来就在js里面写时间了，先写点击增加按钮执行的操作
let but = document.getElementById('but'); // 获取thead下标,并赋值变量,可以使后面获取到表头里面的th let thead = document.getElementsByTagName('thead')[0]; // 获取tbody下标,并赋值变量,可以使后面获取到表头里面的td let tbody = document.getElementsByTagName('tbody')[0]; // 给予变量赋值并储存 let content = 100; // 给按钮绑定一个监听事件,监听按钮被点击时所执行的函数 but.addEventListener('click', function () { let str = "<tr>" + "<th>序号</th>" + "<th>" + content + "</th>" + "<th><button>删除</button></th>" + "</tr>"; // 在tbody里面的内容进行+=，否则会把之前的tr覆盖, tbody.innerHTML += str; // tr里面第二个值进行递加100 content += 100; // 调用下面的颜色函数 sutcolor(); })
接下来是判断颜色
// 创建一个用于判断表格颜色的函数 function sutcolor() { // 声明一个变量并赋予他tbody里面子元素 let trs = tbody.children; // for循环用于把trs从0到比trs小于一个长度按照循环一次加一的规律循环 for (let i = 0; i < trs.length; i++) { // 判断当i取余2后如果是等于给予变色，否则给予白色 if (i % 2 == 1) { // 把trs下标所对应的th背景颜色修改 trs[i].style.backgroundColor = "pink"; // 如果上面的条件不符合则执行下面的代码 } else { // 把trs下标所对应的th背景颜色修改 trs[i].style.backgroundColor = "white"; } // 声明一个变量并且获取他第i个tr的第一个td let istd = trs[i].children[0]; // 给予新增行序号所对应的内容 istd.innerHTML = i + 1; } }
最后则是用于删除
// 用于删除所点击删除所对应的表格那一行tr tbody.addEventListener('click', function (e) { // 用于兼容ie低版本浏览器 e = e || window.event; // 声明变量并赋值,点击那个就输出哪个用于兼容ie低版本浏览器 let target = e.target || e.scrElement; // 判断当如果表格里面的内容有删除的时候如果点击了怎么做 if (target.innerHTML == "删除") { // 声明一个变量,并且赋值他一个tr里面的td都包含在里面 let trs = target.parentElement.parentElement; console.log(target); // 把tbody里面的trs一行删除 tbody.removeChild(trs); // 调用函数 sutcolor(); } });
大家可以看一下，我把具体解释都写在代码里面的注释上面了，不会的看下注释哦
