JS通过奇数项和偶数项实现两种背景颜色的表格实现代码

分类：Javascript| 发布：raodaor| 查看：1438 | 发表时间：2013/12/4

本文提供一种好看表格的解决方案，通过为<tr>元素添加属性或类型选择器，再通过CSS设置可以实现双背景色表格，但如果表格很长，逐个元素添加可真麻烦。而且这样的代码维护起来不容易。所以比较好的方式是用JS实现。

原理其实很简单：利用getElementsByTagName得到所有的<tr>元素，然后分别为奇数项和偶数项的<tr>元素添加背景颜色。
核心代码：

01function color() { 
02//把表头设为紫色 
03var th = document.getElementById("th"); 
04th.style.background = "violet" 
05//1.得到所有<tr>元素 
06var trs = document.getElementsByTagName("tr"); 
07var i; 
08for(i = 1; i <trs.length; i++) { 
09//2.改变<tr>元素的背景颜色 
10if(i % 2 == 0) { 
11trs[i].style.background = "yellow"; 
12} else { 
13trs[i].style.background = "olive"; 
14} 
15} 
16} 
17window.onload = color; 

全部代码：

01<html> 
02<head> 
03<title>双色表格</title> 
04<style type="text/css"> 
05<!-- 
06table { 
07border:solid 1px black; 
08text-align:center; 
09border-spacing:0px; 
10} 
11th,td { 
12border:solid 1px black; 
13width:100px; 
14} 
15--> 
16</style> 
17<script type="text/javascript" > 
18function color() { 
19//把表头设为紫色 
20var th = document.getElementById("th"); 
21th.style.background = "violet" 
22//1.得到所有<tr>元素 
23var trs = document.getElementsByTagName("tr"); 
24var i; 
25for(i = 1; i <trs.length; i++) { 
26//2.改变<tr>元素的背景颜色 
27if(i % 2 == 0) { 
28trs[i].style.background = "yellow"; 
29} else { 
30trs[i].style.background = "olive"; 
31} 
32} 
33} 
34window.onload = color; 
35</script> 
36</head> 
37<body> 
38<center> 
39<table> 
40<tr id="th"> 
41<th>姓名</th> 
42<th>科目</th> 
43<th>成绩</th> 
44</tr> 
45<tr> 
46<td>张三</td> 
47<td>语文</td> 
48<td>90</td> 
49</tr> 
50<tr> 
51<td>张三</td> 
52<td>数学</td> 
53<td>87</td> 
54</tr> 
55<tr> 
56<td>李四</td> 
57<td>数学</td> 
58<td>68</td> 
59</tr> 
60<tr> 
61<td>王五</td> 
62<td>英语</td> 
63<td>76</td> 
64</tr> 
65</table> 
66</center> 
67</body> 
68</html> 