对于表格,为了让用户浏览时不会看错行,一般使用奇偶行机制,可以采用后台经过判断奇偶来给table着色.
这里提供一种简便的方法,即是页面加载完毕后用js脚本判断,对表格进行着色.如下:
1<html>
2<head>
3<meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
4<title>table Color</title>
5<style>
6table{border-top:1px solid black;border-left:1px solid black;cursor:default;}
7td{border-bottom:1px solid black;border-right:1px solid black;height:22px;}
8th{border-bottom:2px solid black;border-right:1px solid black;background-color:#999999;}
9.trOdd{background-color:#FFFFFF;}
10.trEven{background-color:#CCCCCC;}
11</style>
12<script language="javascript">
13/*********************** setTableColor.js ***********************************/
14/**
15* added by LxcJie 2004.6.25
16* 自动扫描表格，描绘奇偶行的颜色
17* oTable：目标表格 oddClass：奇数行的css样式 evenClass：偶数行的css样式
18*/
19function setRowColor(oTable,oddClass,evenClass)
20{
21resetTableColor(oTable);
22for(var i=1; i<oTable.rows.length; i++)
23{
24if(i % 2 == 0)
25oTable.rows[i].className = evenClass;
26else
27oTable.rows[i].className = oddClass;
28}
29}
30
31/**
32* added by LxcJie 2004.6.28
33* 自动扫描表格，描绘奇偶列的颜色
34* oTable：目标表格 oddClass：奇数列的css样式 evenClass：偶数列的css样式
35*/
36function setColColor(oTable,oddClass,evenClass)
37{
38resetTableColor(oTable);
39for(var i=1; i<oTable.rows.length; i++)
40{
41for(var j=0; j<oTable.rows[i].cells.length; j++)
42{
43if(j % 2 == 0)
44oTable.rows[i].cells[j].className = evenClass;
45else
46oTable.rows[i].cells[j].className = oddClass;
47}
48}
49}
50
51//清空所有tr和td的样式
52function resetTableColor(oTable)
53{
54for(var i=1; i<oTable.rows.length; i++)
55{
56oTable.rows[i].className = "";
57for(var j=0; j<oTable.rows[i].cells.length; j++)
58oTable.rows[i].cells[j].className = "";
59}
60}
61/*********************** setTableColor.js 结束 ***********************************/
62</script>
63<script language="javascript">
64window.changeTag = true;
65function init()
66{
67setRowColor(document.all.tableRow,'trOdd','trEven');
68setColColor(document.all.tableCol,'trOdd','trEven');
69}
70
71function change()
72{
73if(changeTag)
74{
75setRowColor(document.all.tableCol,'trOdd','trEven');
76setColColor(document.all.tableRow,'trOdd','trEven');
77changeTag = false;
78}
79else
80{
81setRowColor(document.all.tableRow,'trOdd','trEven');
82setColColor(document.all.tableCol,'trOdd','trEven');
83changeTag = true;
84}
85}
86</script>
87</head>
88<body onload="init()">
89<table border="0" cellpadding="0" cellspacing="0" id="tableRow" width="70%">
90<tr>
91<th scope="col">col1</th>
92<th scope="col">col2</th>
93<th scope="col">col3</th>
94</tr>
95<tr>
96<td> </td>
97<td> </td>
98<td> </td>
99</tr>
100<tr>
101<td> </td>
102<td> </td>
103<td> </td>
104</tr>
105<tr>
106<td> </td>
107<td> </td>
108<td> </td>
109</tr>
110<tr>
111<td> </td>
112<td> </td>
113<td> </td>
114</tr>
115<tr>
116<td> </td>
117<td> </td>
118<td> </td>
119</tr>
120<tr>
121<td> </td>
122<td> </td>
123<td> </td>
124</tr>
125</table>
126<p>
127<table border="0" cellpadding="0" cellspacing="0" id="tableCol" width="70%">
128<tr>
129<th scope="col" width="25%">col1</th>
130<th scope="col" width="25%">col2</th>
131<th scope="col" width="25%">col3</th>
132<th scope="col" width="25%">col4</th>
133</tr>
134<tr>
135<td> </td>
136<td> </td>
137<td> </td>
138<td> </td>
139</tr>
140<tr>
141<td> </td>
142<td> </td>
143<td> </td>
144<td> </td>
145</tr>
146<tr>
147<td> </td>
148<td> </td>
149<td> </td>
150<td> </td>
151</tr>
152<tr>
153<td> </td>
154<td> </td>
155<td> </td>
156<td> </td>
157</tr>
158<tr>
159<td> </td>
160<td> </td>
161<td> </td>
162<td> </td>
163</tr>
164<tr>
165<td> </td>
166<td> </td>
167<td> </td>
168<td> </td>
169</tr>
170</table><p>
171<input onclick="change()" style="border:1px solid black; " type="button" value=" 交 换 "/>
172</p></p></body>
173</html>