首先,我们需要一个表单,下面是我用的表单
<table width="300" border="1">
<tr name="aaa" style="background:#FFF">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr name="bbb" style="background:#000">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr name="aaa" style="background:#FFF">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr name="bbb" style="background:#000">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr name="aaa" style="background:#FFF">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr name="bbb" style="background:#000">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
接着就是需要一个javascript来控制表单中tr的颜色
我写了两种方法,在firefox都可以显示
第一种,利用tr的name属性
function editcolor(){
var color1=document.getElementsByName("aaa");
for(var i=0;i<color1.length;i++){
color1[i].style.background="red";
}
var color2=document.getElementsByName("bbb");
for(i=0;i<color2.length;i++){
color2[i].style.background="blue";
}
}
第二种不需要标签属性,单纯的计算表单的奇偶行数
function editc(){
var color=document.getElementsByTagName("tr");
for(var i=0;i<color.length;i++){
if(i%2==0){
color[i].style.background="red";
}else{
color[i].style.background="blue";
}
}
}
效果图: