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

关注

原创最新推荐文章于 2026-08-23 22:32:59 发布 885 阅读 AI 写同款· GEO 优化 ›

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

收录于