JS 實(shí)現(xiàn)雙色表格實(shí)現(xiàn)代碼

更新時(shí)間：2009年11月24日 02:15:22 作者：

通過為<tr>元素添加屬性或類型選擇器，再通過CSS設(shè)置可以實(shí)現(xiàn)雙色表格，但如果表格很長，逐個(gè)元素添加可真麻煩。而且這樣的代碼維護(hù)起來不容易。所以比較好的方式是用JS實(shí)現(xiàn)。

原理其實(shí)很簡單：利用getElementsByTagName得到所有的<tr>元素，然后分別為奇數(shù)項(xiàng)和偶數(shù)項(xiàng)的<tr>元素添加背景顏色。
核心代碼：

復(fù)制代碼代碼如下:

 
<script type="text/javascript" > 
function color() { 
//把表頭設(shè)為紫色 
var th = document.getElementById("th"); 
th.style.background = "violet" 
//1.得到所有<tr>元素 
var trs = document.getElementsByTagName("tr"); 
var i; 
for(i = 1; i <trs.length; i++) { 
//2.改變<tr>元素的背景顏色 
if(i % 2 == 0) { 
trs[i].style.background = "yellow"; 
} else { 
trs[i].style.background = "olive"; 
} 
} 
} 
window.onload = color; 
</script> 

全部代碼：

復(fù)制代碼代碼如下:

 
<html> 
<head> 
<title>雙色表格</title> 
<style type="text/css"> 
<!-- 
table { 
border:solid 1px black; 
text-align:center; 
border-spacing:0px; 
} 
th,td { 
border:solid 1px black; 
width:100px; 
} 
--> 
</style> 
<script type="text/javascript" > 
function color() { 
//把表頭設(shè)為紫色 
var th = document.getElementById("th"); 
th.style.background = "violet" 
//1.得到所有<tr>元素 
var trs = document.getElementsByTagName("tr"); 
var i; 
for(i = 1; i <trs.length; i++) { 
//2.改變<tr>元素的背景顏色 
if(i % 2 == 0) { 
trs[i].style.background = "yellow"; 
} else { 
trs[i].style.background = "olive"; 
} 
} 
} 
window.onload = color; 
</script> 
</head> 
<body> 
<center> 
<table> 
<tr id="th"> 
<th>姓名</th> 
<th>科目</th> 
<th>成績</th> 
</tr> 
<tr> 
<td>張三</td> 
<td>語文</td> 
<td>90</td> 
</tr> 
<tr> 
<td>張三</td> 
<td>數(shù)學(xué)</td> 
<td>87</td> 
</tr> 
<tr> 
<td>李四</td> 
<td>數(shù)學(xué)</td> 
<td>68</td> 
</tr> 
<tr> 
<td>王五</td> 
<td>英語</td> 
<td>76</td> 
</tr> 
</table> 
</center> 
</body> 
</html> 