JavaScript|表格隔行变色(可作模板copy)_js用排他思想做一个表格隔行变色效果,如效果所示,且相邻两行是不同颜色。-CSDN博客

本文链接：https://blog.csdn.net/m0_37149062/article/details/106281163

本博文源于js基础，主要实现表格的隔行变色。

题目再现

想让表格产生隔行变色的效果。

解题思路

若手动给所有的奇数行或者偶数行设置某个类名，则显地太麻烦。使用js可以简化这种重复工作。

测试效果

在这里插入图片描述

附上js+css代码

js代码+css代码直接copy，即用即所得！

<script type="text/javascript">
	let oTrs = document.getElementsByTagName("tr");
	for(let i =0;i<oTrs.length;i+=2) {
		oTrs[i].className = "spec";
		
	}
</script>

<style>
	table,table tr th, table tr td {
		border:1px solid #0094ff;
		}
	table { 
		width: 400px; 
		line-height: 25px; 
		 text-align: center; 
		 border-collapse: collapse;
		 }   
	table tr.spec {
		background-color: gold;
	}	 
</style>

完整代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			table,table tr th, table tr td {
				border:1px solid #0094ff;
				}
			table { 
				width: 400px; 
				line-height: 25px; 
				 text-align: center; 
				 border-collapse: collapse;
				 }   
			table tr.spec {
				background-color: gold;
			}	 
		</style>

	</head>
	<body>
		<table >
			<tr>
				<td>js</td><td>js</td><td>js</td><td>js</td><td>js</td>
			</tr>
			<tr>
				<td>dsa</td><td>dsa</td><td>dsa</td><td>dsa</td><td>dsa</td>
			</tr>
			<tr>
				<td>java</td><td>java</td><td>java</td><td>java</td><td>java</td>
			</tr>
			<tr>
				<td>html</td><td>html</td><td>html</td><td>html</td><td>html</td>
			</tr>
			<tr>
				<td>dsa</td><td>dsa</td><td>dsa</td><td>dsa</td><td>dsa</td>
			</tr>
			<tr>
				<td>js</td><td>js</td><td>js</td><td>js</td><td>js</td>
			</tr>
			<tr>
				<td>dsa</td><td>dsa</td><td>dsa</td><td>dsa</td><td>dsa</td>
			</tr>
			<tr>
				<td>java</td><td>java</td><td>java</td><td>java</td><td>java</td>
			</tr>
			<tr>
				<td>html</td><td>html</td><td>html</td><td>html</td><td>html</td>
			</tr>
			<tr>
				<td>dsa</td><td>dsa</td><td>dsa</td><td>dsa</td><td>dsa</td>
			</tr>
		<script type="text/javascript">
			let oTrs = document.getElementsByTagName("tr");
			for(let i =0;i<oTrs.length;i+=2) {
				oTrs[i].className = "spec";
				
			}
		</script>
		</table>
	</body>
</html>