用js实现隔行换色

杯倾川·苶陽

于 2024-05-12 12:09:49 发布

阅读量227

点赞数 3

文章标签： javascript 青少年编程 html5

本文链接：https://blog.csdn.net/weixin_72636650/article/details/138749291

版权

首先要想的是，点击添加行的时候会新增一个tr标签，里面是内容，其次就是换过行之后，要判断是否要换颜色，隔一行就换颜色，所以可以用i % 2 == 1去判定是否需要换颜色，里面有具体的解释

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table {
            width: 300px;
            border: 1px #525252 solid;
        }
        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>1</td>
                <td>
                    <!-- 按钮 -->
                    <button>删除</button>
                </td> 
            </tr>
        </tbody>
    </table>
    <button id="row">添加行</button>
    <script>
       
			// 获取添加行按钮标签
			let row = document.getElementById('row');
			// 获取thead标签
			let thead = document.getElementsByTagName('thead')[0];
			// 获取tbody标签
			let tbody = document.getElementsByTagName('tbody')[0];
			// 定义内容变量，表示为每一行显示的内容，初始为 100
			let content = 51;
			// 获取删除按钮
			let button = document.getElementsByTagName('button')[0];
 
 
			// 给添加行绑定点击事件
			row.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;
						// 内容变量 += 50
						content += 50;
					}
					// 判断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);
                // 调用隔行换色函数
				color();
			})
			// 创建隔行换色函数{
			function color() {
 
				// 获取当前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 {
						// 否则设置为白色的
						trs[i].style.backgroundColor = "white";
					}
				}
			}


			// 给删除按钮绑定点击事件

			tbody.addEventListener('click', function(e) {
				let target=e.target||e.srcElement;
				if(target.tagName.toLowerCase()=='button'){
					// 获取当前按钮所在的tr
					let tr = target.parentNode.parentNode;
					// 移除当前tr
					tbody.removeChild(tr);
					// 重新排序
					sort();
					// 调用隔行换色函数
					color();
				}
			})
			// 创建序号排序函数
			function sort() {
				// 一个tbody获取里边的tr，能看到现在一共有多少行
				let tr = tbody.children;
				// 循环行数{
				for (let i = 0; i < tr.length; i++) {
					// 获取当前这一行里边的第一个td
					let td = tr[i].children[0];
					// 修改这个td的内容为 i + 1，为了重新设定序号
					td.innerHTML = i + 1;
				}
			}
    </script>
</body>
</html>