4_2.DOM--实现表格隔行变色

最新推荐文章于 2022-07-14 19:00:59 发布

ATWLee

最新推荐文章于 2022-07-14 19:00:59 发布

阅读量138

点赞数 1

分类专栏： Vue基础学习

本文链接：https://blog.csdn.net/BWater_monster/article/details/100917865

版权

Vue基础学习专栏收录该内容

57 篇文章 0 订阅

订阅专栏

<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		table,th,td{
			border: 1px solid #aaa;
			border-collapse: collapse;
		}
		table{
			width: 30%;
		}
		table thead{
			background-color: blue;
			color: #fff;
		}
		.changecolor{
			background-color: red;
			color: #fff;
		}
	</style>
</head>
<body>
	<table>
		<thead>
			<tr>
				<th>Name</th>
				<th>Money</th>
				<th>Time</th>
				<th>Delete</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>A</td>
				<td>100</td>
				<td>1</td>
				<td><input type="button" value="Delect"></td>
			</tr>
			<tr>
				<td>B</td>
				<td>200</td>
				<td>2</td>
				<td><input type="button" value="Delect"></td>
			</tr>
			<tr>
				<td>C</td>
				<td>300</td>
				<td>3</td>
				<td><input type="button" value="Delect"></td>
			</tr>
			<tr>
				<td>D</td>
				<td>400</td>
				<td>4</td>
				<td><input type="button" value="Delect"></td>
			</tr>
		</tbody>
	</table>
	<script>
		var trs=document.getElementsByTagName("tr");
		for(var i=1,trs_length=trs.length;i<trs_length;i++){
			var trs_i=trs[i];
			if(i%2==0){
				trs[i].className="changecolor";
			}
		}
		//上述代码采用的是HTML方法查找的。如果较复杂，就可以采用选择器方法查找
		var trs=document.querySelectorAll("#data tbody tr:nth-child(2n)")//id为data的table下的tbody下的所有tr，再次筛选tr为2n行的tr
	</script>
</body>
</html>

在这里插入图片描述