目前已经有了一个网站,其中许多页面有动态表格,现在需要实现的是把页面中的动态表格在按单双行显示不同的颜色(不是页面中所有的表格,只是其中的一个表格)。有没有什么简单的方法来实现。
因为这些页面中都调用了css,我想通过css来实现,不知道可不可行。
谢谢帮助
---------------------------------------------------------------
滿足條件可以這樣加樣式:
document.all.**.className="myCSS";
---------------------------------------------------------------
应该可以实现,采用样式中定义HTC,
.table1 {behavior:url(table.htc);
}
在table.htc中定javascript脚本实现按单双行显示不同的颜色
---------------------------------------------------------------
定义两个底色不同的class
在你动态产生表格时
for ....
if trCls = class1 then
trCls=class2
else
trCls=class1
end if
%>
1<tr ...="" <html="" =trcls="" \---------------------------------------------------------------="" ```="" class="```" html文件:="" next="" 因为无任你有几百个页面你只需要在这一个htc里面编程就可以了="" 如果所有网页使用了公用的css,无疑在这个css引入htc是最简单的方法。="" 实例="">
2<head>
3<style>
4<!--
5.table1 { behavior:url(table.htc); }
6\-->
7</style>
8</head>
9<body>
10<table border="1" bordercolor="#111111" cellpadding="0" cellspacing="0" class="table1" id="AutoNumber1" style="border-collapse: collapse" width="100%">
11<tr>
12<td width="25%"> </td>
13<td width="25%"> </td>
14<td width="25%"> </td>
15<td width="25%"> </td>
16</tr>
17<tr>
18<td width="25%"> </td>
19<td width="25%"> </td>
20<td width="25%"> </td>
21<td width="25%"> </td>
22</tr>
23<tr>
24<td width="25%"> </td>
25<td width="25%"> </td>
26<td width="25%"> </td>
27<td width="25%"> </td>
28</tr>
29<tr>
30<td width="25%"> </td>
31<td width="25%"> </td>
32<td width="25%"> </td>
33<td width="25%"> </td>
34</tr>
35<tr>
36<td width="25%"> </td>
37<td width="25%"> </td>
38<td width="25%"> </td>
39<td width="25%"> </td>
40</tr>
41<tr>
42<td width="25%"> </td>
43<td width="25%"> </td>
44<td width="25%"> </td>
45<td width="25%"> </td>
46</tr>
47<tr>
48<td width="25%"> </td>
49<td width="25%"> </td>
50<td width="25%"> </td>
51<td width="25%"> </td>
52</tr>
53<tr>
54<td width="25%"> </td>
55<td width="25%"> </td>
56<td width="25%"> </td>
57<td width="25%"> </td>
58</tr>
59</table>
60</body>
61
62
63htc文件:
64<public:component>
65<public:attach event="oncontentready" onevent="Init()"></public:attach>
66<script language="JScript">
67
68//-----------------------------------------------
69
70function Init()
71{
72for(i=0;i<element.rows.length;i++){
73if(i%2==0)
74element.rows(i).style.backgroundColor = "#0000FF";
75else
76element.rows(i).style.backgroundColor = "#FF0000";
77}
78
79}
80</script>
81</public:component>
82
83\---------------------------------------------------------------
84
85<html>
86<head>
87<style>
88<!--
89table { behavior:url(table.htc); }
90\-->
91</style>
92</head>
93<body>
94<table border="1" bordercolor="#111111" cellpadding="0" cellspacing="0" class="table1" id="AutoNumber1" style="border-collapse: collapse" width="100%">
95<tr>
96<td width="25%"> </td>
97<td width="25%"> </td>
98<td width="25%"> </td>
99<td width="25%"> </td>
100</tr>
101<tr>
102<td width="25%"> </td>
103<td width="25%"> </td>
104<td width="25%"> </td>
105<td width="25%"> </td>
106</tr>
107<tr>
108<td width="25%"> </td>
109<td width="25%"> </td>
110<td width="25%"> </td>
111<td width="25%"> </td>
112</tr>
113</table>
114<table border="1" bordercolor="#111111" cellpadding="0" cellspacing="0" id="AutoNumber2" style="border-collapse: collapse" width="100%">
115<tr>
116<td width="33%"> </td>
117<td width="33%"> </td>
118<td width="34%"> </td>
119</tr>
120<tr>
121<td width="33%"> </td>
122<td width="33%"> </td>
123<td width="34%"> </td>
124</tr>
125<tr>
126<td width="33%"> </td>
127<td width="33%"> </td>
128<td width="34%"> </td>
129</tr>
130</table>
131<table border="1" bordercolor="#111111" cellpadding="0" cellspacing="0" id="AutoNumber3" style="border-collapse: collapse" width="100%">
132<tr>
133<td width="33%"> </td>
134<td width="33%"> </td>
135<td width="34%"> </td>
136</tr>
137<tr>
138<td width="33%"> </td>
139<td width="33%"> </td>
140<td width="34%"> </td>
141</tr>
142<tr>
143<td width="33%"> </td>
144<td width="33%"> </td>
145<td width="34%"> </td>
146</tr>
147</table>
148</body>
149</html>
150<public:component>
151<public:attach event="oncontentready" onevent="Init()"></public:attach>
152<script language="JScript">
153
154//-----------------------------------------------
155
156function Init()
157{
158if(window.document.getElementsByTagName("TABLE")[2]==element){
159for(i=0;i<element.rows.length;i++){
160if(i%2==0)
161element.rows(i).style.backgroundColor = "#0000FF";
162else
163element.rows(i).style.backgroundColor = "#FF0000";
164}
165}
166
167}
168</script>
169</public:component></tr>