如何用JS实现表格隔行换色功能

最新推荐文章于 2024-05-16 16:53:29 发布

聂聂脸

最新推荐文章于 2024-05-16 16:53:29 发布

阅读量134

点赞数 3

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/2301_79420857/article/details/134168125

版权

首先呢我们先说一下功能的具体要求：

点击添加按钮会添加一行
点击删除会删除一行，序号不变，再次点击添加时，内容在删除的值的基础上加100
奇数是白色，偶数是粉色

HTML代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表格隔行换色功能</title>
		<link rel="stylesheet" href="./css/选项卡.css">
	</head>
	<body>
		<table border="1" cellspacing="0">
			<thead>
				<tr align="center">
					<th width="50px">序号</th>
					<th width="80px">内容</th>
					<th width="100px">操作</th>
				</tr>
			</thead>

			<tbody align="center">
				<tr>
					<td>1</td>
					<td>data</td>
					<td>
						<button onclick="del(event)">删除</button>
					</td>
				</tr>
			</tbody>
		</table>

		<button id="box" style="margin-left: 18%;">添加</button>

		<script src="js/表格隔行换色功能.js"></script>
	</body>
</html>

JS代码

let box = document.getElementById('box');
// 获取表格的身体
let thbody = document.getElementsByTagName('tbody')[0];
// 获取按钮
let but = document.getElementsByTagName('button')[0];
// 定义一个内容初始值为100

// tr是行，td是格。
let content = 100;
// 给添加行绑定点击事件
box.onclick = function() {
	// 获取内部tr
	let TR = document.getElementsByTagName('tr')[0];

	let on = document.children;
	// 获取内部格td
	let TD = document.getElementsByTagName('td')[0];

	let thbodytoo = thbody.children;
	// 创建新的tr标签
	let onetr = document.createElement('tr');


	// 循环格的长度当点击box时创建行，格
	for (let k = 0; k < 3; k++) {

		// 创建新的td标签
		let onetd = document.createElement('td');

		if (k == 0) {
			onetd.innerHTML = thbodytoo.length + 1
		}

		onetr.appendChild(onetd);

		if (k == 1) {
			onetd.innerHTML = content;
			content += 100;
		}

		thbody.appendChild(onetr);
		if (k == 2) {
			onetd.innerHTML = '<button onclick="del(event)">删除</button>';
		}
	}
	// 在点击这里调用换色函数
	color()
}


// 换色
function color() {
	// 循环整个表格内容
	let thbodytoo = thbody.children;
	// 循环判断行颜色
	for (let i = 0; i < thbodytoo.length; i++) {
		if (i % 2 != 0) {
			thbodytoo[i].style.backgroundColor = 'hotpink';
		} else if (i % 2 != 1) {
			thbodytoo[i].style.backgroundColor = 'white';
		}
	}
}

// 删除
function del(e) {
	let img = e.target;
	let img_one = img.parentElement.parentElement;
	thbody.removeChild(img_one);

	sort()
	color()
}

// 排序
function sort() {
	let thbodytoo = thbody.children;
	for (let b = 0; b < thbodytoo.length; b++) {
		let item = thbodytoo[b].children[0];
		item.innerHTML = b + 1;
	}

}

以上就是如何用JS实现表格隔行换色功能。