js实现表格隔行换色

最新推荐文章于 2024-05-03 11:08:18 发布

萝卜头不吃萝卜头

最新推荐文章于 2024-05-03 11:08:18 发布

阅读量878

点赞数 2

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/SqlloveSyn/article/details/128454955

版权

最终样式：

具体实现：

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
		<style>
			table {
				width: 300px;
				border: 1px #525252 solid;
			}

			th,
			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>data</td>
					<td>
						<button>删除</button>
					</td>
				</tr>
			</tbody>
		</table>
		<button id="but">添加行</button>

		<script>
			// 获取添加行按钮标签
			let but = document.getElementById('but');

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


			// 给添加行绑定点击事件{
			but.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;

						// 内容变量 += 100
						content += 100;

					}
					// } 

					// 判断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);

				// 调用隔行换色函数
				sutcolor();
			})
			// } 

			// 创建隔行换色函数{
			function sutcolor() {

				// 获取当前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 {
						// }else{
						// 否则设置为白色的
						trs[i].style.backgroundColor = "white";

					}
				}
			}

			// 给tbody绑定点击事件作为事件代理{
			tbody.addEventListener('click', function(e) {
				// 兼容IE获取event事件对象
				e = e || window.event;
				// 通过 event 事件对象获取事件源
				let target = e.target || e.scrElement;
				// 判断事件源内容是否 "删除" {
				if (target.innerHTML == "删除") {
					// 通过事件源获取父元素的父元素，也就是当前点击的这一行 tr
					let trs = target.parentElement.parentElement;

					// 删除这一行  父元素.removeChild(子元素) 
					// 父元素是tbody 子元素就是我没刚刚获取到的哪一行 tr
					tbody.removeChild(trs);

					// 调用序号排序函数
					issort();

					// 重新调用隔行换色函数
					sutcolor();

				}
			})

			// 创建序号排序函数{
			function issort() {

				// 一个tbody获取里边的tr，看看现在一共有多少行
				let istr = tbody.children;

				// 循环行数{
				for (let i = 0; i < istr.length; i++) {

					// 获取当前这一行里边的第一个td
					let istd = istr[i].children[0];

					// 修改这个td的内容为 i + 1，为了重新设定序号
					istd.innerHTML = i + 1;
				}
			}
		</script>

	</body>
</html>

以上就是本章的全部内容，感谢您的阅读。