JavaScript 隔行换色数组写法

最新推荐文章于 2024-08-06 18:49:35 发布

派大鑫的工作室

最新推荐文章于 2024-08-06 18:49:35 发布

阅读量116

点赞数 1

文章标签： javascript 前端 css3

本文链接：https://blog.csdn.net/Cc040909/article/details/140162325

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>隔行换色</title>
		<style>
			.thead {
				display: flex;
				width: 200px;
				border: 1px black solid;
			}

			.thead>div {
				width: 70px;
				border: 1px black solid;
				text-align: center;
			}
		</style>
	</head>


	<body>

		<div class="select">
			<div class="thead">
				<div>序号</div>
				<div>内容</div>
				<div>操作</div>
			</div>

			<div class="box"></div>

			<table cellspacing="0">
				<tbody>

				</tbody>
			</table>
			<button class="but" onclick="button()">添加新行</button>
		</div>



		<script>
			// 声明变量
			let i = 1;
			let items = {
				num: 0
			};
			// 这里的arr是上面的items里面的内容
			let arr = [items.num];
			// 点击增加效果
			function button() {
				// 每次执行都加100
				items.num += 100;
				// 将arr通过push放入到
				arr.push(items.num);
				// 点击的时候序号变量++
				i++;
				// 将arr的数据打印到控制台上
				console.log(arr);
				// 调用下方函数
				ren();
			}


			// 声明一个函数
			function ren() {
				let str = '';
				for (let i = 1; i < arr.length; i++) {
					// 用三元表达式的方式进行写入
					str +=
						`<div border: 1px black solid; ${ i % 2 == 1 ? 'style="display:flex;width:200px;background-color:white;"' : 'style="display:flex;width:200px;background-color:pink;"'}>
								            <div style="display:flex;width:70px; border: 1px black solid;">${i}</div>
								            <div style="display:flex;width:70px; border: 1px black solid;">${arr[i]}</div>
								            <div style="display:flex;width:70px; border: 1px black solid;"><button onclick="del(${i})">删除</button></div>
								        </div>    `;
				}
				// 获取标签tbody
				document.getElementsByTagName('tbody')[0].innerHTML = str;
			}

			// 获取到绑定的点击事件
			function del(i) {
				arr.splice(i, 1);
				console.log(arr);
				// 调用函数
				ren();
			}
		</script>
	</body>
</html>