利用Javascript实现隔行变色_javascript隔行变色怎么弄三行-优快云博客

本文链接：https://blog.youkuaiyun.com/java_zhaoyanli/article/details/50776602

本文介绍了一个利用JavaScript动态实现HTML表格隔行变色的方法。通过获取表格元素，遍历并设置奇偶行的背景色，点击按钮即可看到效果。示例中展示了如何在网页中应用此功能。

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

<!DOCTYPE html>
<html>
 <head>
  <title> new document </title>
  <meta charset="utf-8" />
	<style>
		.back{
			background:#005aa0;
		}
	</style>
	<script>
		/**
		 * 隔行变色
		 */
		function change(){
			//1、获取 table 元素
			var tbl = document.getElementById("tbl");
			//2、获取 table 中的 tbody 元素
			var tbody = tbl.getElementsByTagName("tbody")[0];
			//3、获取 tbody 中的所有 tr 元素
			var trs = tbody.getElementsByTagName("tr");
			//4、判断 tr 的奇偶性，改变背景
			var length = trs.length;
			for(var i=0;i<length;i++){
				if(i % 2 == 0){
					trs[i].className="back";
				}
			}
		}
	</script>
 </head>


 <body>
  <button οnclick="change()">变</button>
	<table id="tbl">
		<thead>
			<tr>
				<th>姓名</th>
				<th>工资</th>
				<th>入职时间</th>
				<th>操作</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>Smith</td>
				<td>5000</td>
				<td>2015-5-5</td>
				<td>删除</td>
			</tr>
			<tr>
				<td>Smith</td>
				<td>5000</td>
				<td>2015-5-5</td>
				<td>删除</td>
			</tr>
			<tr>
				<td>Smith</td>
				<td>5000</td>
				<td>2015-5-5</td>
				<td>删除</td>
			</tr>
			<tr>
				<td>Smith</td>
				<td>5000</td>
				<td>2015-5-5</td>
				<td>删除</td>
			</tr>
			<tr>
				<td>Smith</td>
				<td>5000</td>
				<td>2015-5-5</td>
				<td>删除</td>
			</tr>
			<tr>
				<td>Smith</td>
				<td>5000</td>
				<td>2015-5-5</td>
				<td>删除</td>
			</tr>
		</tbody>
	</table>  
 </body>
</html>