JS 隔行换色

效果图：

 HTML:

<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>
<button id="but">添加行</button>

CSS:

table {
	width: 300px;
	border: 1px #525252 solid;
}

th,
td {
	border: 1px #525252 solid;
	text-align: center;
}

JS:

// 获取添加行按钮标签
			let but = document.getElementById("but");
			// 获取thead标签
			let thead = document.getElementsByTagName("thead")[0];
			// 获取tbody标签
			let tbody = document.getElementsByTagName('tbody')[0];
			// 定义内容变量，表示为每一行显示的内容，初始为 100
			let content = 100;


			// 给添加行绑定点击事件{
			but.onclick = function() {
				// 通过thead标签获取内部tr
				let theadtr = thead.getElementsByTagName("tr")[0];
				// 获取tr里th的数量
				let ths = theadtr.children;
				// 创建一个新的tr标签
				let newtr = document.createElement("tr");
				// 循环th的数量{
				for (let i = 0; i < ths.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;
						// 内容变量 += 100
						content += 100;
					}
					// }
					// 判断i下标是否为th的长度-1  是否为最后一个{
					if (i == ths.length - 1) {
						// 让这个td的内容为 "<button>删除</button>";
						newtd.innerHTML = "<button>删除</button>";
					}
					// }
					// 把当前新创建的td标签添加到新的tr标签内
					newtr.appendChild(newtd);
				}
				// }
				// 把这个新创建的tr添加到tbody标签内
				tbody.appendChild(newtr);
				// 调用隔行换色函数
				cutcolor();
			}
			// }
			// 创建隔行换色函数{
			function cutcolor() {
				// 获取当前tbody内tr的数量，表示为有多少行
				let trs = tbody.children
				console.log(trs);
				// 循环行数{
				for (let i = 0; i < trs.length; i++) {
					// 判断当前下标 % 2 取余数 是否等于 1 ，等于1表示奇数{
					if (i % 2 == 1) {
						console.log(i);
						let strs = 'abcdef1234567890';
						for (let j = 0; j < strs.length; j++) {
							console.log(j);
						}
						// 给奇数这一行的颜色设置为粉色pink
						trs[i].style.backgroundColor = "pink";
					} else {
						// }else{
						// 如果为偶数，设置为白色的
						trs[i].style.backgroundColor = "#FFFFFF";
					}
					// }
				}
				// }
			}
			// }


			// 给tbody绑定点击事件作为事件代理{
			tbody.addEventListener("click", function(e) {
				// 兼容IE获取event事件对象
				e = e || window.event;
				// 通过 event 事件对象获取事件源
				let target = e.target || e.srcElement;
				// 判断事件源内容是否 "删除" {
				if (target.innerHTML == "删除") {
					// 通过事件源获取父元素的父元素，也就是当前点击的这一行 tr
					let istr = target.parentElement.parentElement;
					// 删除这一行  父元素.removeChild(子元素) 
					// 父元素是tbody 子元素就是我没刚刚获取到的哪一行 tr
					tbody.removeChild(istr);
					// 调用序号排序函数
					issort();
					// 重新调用隔行换色函数
					cutcolor();
				}
				// }
			})
			// }

			// 创建序号排序函数{
			function issort() {
				// 一个tbody获取里边的tr，看看现在一共有多少行
				let trs = tbody.children;
				// 循环行数{
				for (let i = 0; i < trs.length; i++) {
					// 获取当前这一行里边的第一个td
					let trstd = trs[i].children[0];
					// 修改这个td的内容为 i + 1，为了重新设定序号
					trstd.innerHTML = i + 1;
				}
				// }
			}
			// }
			function isNaN(n) {
				if (n !== n) {
					return true;
				} else {
					return false;
				}
			}
			console.log(isNaN());