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

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

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

<!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>