面试题：用table显示n条记录，样式要求，每隔三行换一种颜色

最新推荐文章于 2025-02-17 15:11:02 发布

原创最新推荐文章于 2025-02-17 15:11:02 发布 · 845 阅读

1 ·

CC 4.0 BY-SA版权

html5 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了一种使用JavaScript为HTML表格行动态设置背景颜色的方法。通过获取特定类名的元素并利用循环和条件判断，可以实现每三行交替变化背景色的效果。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<table border="" cellspacing="" cellpadding="">
			<tr><th>Header</th></tr>
			<tr class="guosheng"><td>Data</td></tr>
			<tr class="guosheng"><td>Data</td></tr>
			<tr class="guosheng"><td>Data</td></tr>
			<tr class="guosheng"><td>Data</td></tr>
			<tr class="guosheng"><td>Data</td></tr>
			<tr class="guosheng"><td>Data</td></tr>
			<tr class="guosheng"><td>Data</td></tr>
			<tr class="guosheng"><td>Data</td></tr>
			<tr class="guosheng"><td>Data</td></tr>
			<tr class="guosheng"><td>Data</td></tr>
			<tr class="guosheng"><td>Data</td></tr>
			<tr class="guosheng"><td>Data</td></tr>
			<tr class="guosheng"><td>Data</td></tr>
			<tr class="guosheng"><td>Data</td></tr>
			<tr class="guosheng"><td>Data</td></tr>
			<tr class="guosheng"><td>Data</td></tr>
			<tr class="guosheng"><td>Data</td></tr>
			<tr class="guosheng"><td>Data</td></tr>
			<tr class="guosheng"><td>Data</td></tr>
			<tr class="guosheng"><td>Data</td></tr>
			<tr class="guosheng"><td>Data</td></tr>
			<tr class="guosheng"><td>Data</td></tr>
			<tr class="guosheng"><td>Data</td></tr>
			<tr class="guosheng"><td>Data</td></tr>
			<tr class="guosheng"><td>Data</td></tr>
		</table>
	</body>
</html>
<script type="text/javascript">
	window.onload = function(){
		var guosheng = document.getElementsByClassName("guosheng");
		for(var i=0;i<guosheng.length;i++){
			var j = parseInt(i/3);
			if(j%2 == 0)guosheng[i].style.background="red";
			else guosheng[i].style.background = "green";
		}
	}
</script>