HTML表格隔行变色-优快云博客

本文链接：https://blog.youkuaiyun.com/iteye_17658/article/details/82650217

本文介绍了一种使用JavaScript和jQuery实现HTML表格隔行变色的方法。通过简单的代码即可让表格每一行交替显示不同背景颜色，提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
window.onload = function(){ //页面所有元素加载完毕
	var item  =  document.getElementById("tb");			//获取id为tb的元素(table)
	var tbody =  item.getElementsByTagName("tbody")[0];	//获取表格的第一个tbody元素
	var trs =   tbody.getElementsByTagName("tr");	        //获取tbody元素下的所有tr元素
	for(var i=0;i < trs.length;i++){//循环tr元素
		if(i%2==0){        //取模. (取余数.比如 0%2=0 , 1%2=1 , 2%2=0 , 3%2=1)
			trs[i].style.backgroundColor = "#888"; // 改变 符合条件的tr元素 的背景色.
		}
	}
}
</script>
</head>
<body>
<table id="tb" border="0" cellpadding="0" cellspacing="0">
	<tbody>
		<tr><td>第一行</td><td>第一行</td></tr>
		<tr><td>第二行</td><td>第二行</td></tr>
		<tr><td>第三行</td><td>第三行</td></tr>
		<tr><td>第四行</td><td>第四行</td></tr>
		<tr><td>第五行</td><td>第五行</td></tr>
		<tr><td>第六行</td><td>第六行</td></tr>
	</tbody>
</table>
</body>
</html>

使用JQ来隔行变色

<script language="javascript" >
	$(function(){// dom元素加载完毕
	   $('#tb tbody tr:even').css("backgroundColor","#888");
	   //获取id为tb的元素,然后寻找他下面的tbody标签，再寻找tbody下索引值是偶数的tr元素,
	   //改变它的背景色.
	})
</script>

效果图：

JQ 隔行变色