当前页面: 开发资料首页 → Javascript 专题 → 表格中两行的颜色交替显示

表格中两行的颜色交替显示

摘要: 表格中两行的颜色交替显示

<tr> <td>

<table id="main_table">
<tr>
<td width="100">a</td>
<td width="100">b</td>
</tr>
<tr>
<td width="100">a</td>
<td width="100">b</td>
</tr>
<tr>
<td width="100">a</td>
<td width="100">b</td>
</tr>
<tr>
<td width="100">a</td>
<td width="100">b</td>
</tr>
<tr>
<td width="100">a</td>
<td width="100">b</td>
</tr>
<tr>
<td width="100">a</td>
<td width="100">b</td>
</tr>
<tr>
<td width="100">a</td>
<td width="100">b</td>
</tr>
<tr>
<td width="100">a</td>
<td width="100">b</td>
</tr>
<tr>
<td width="100">a</td>
<td width="100">b</td>
</tr>
<tr>
<td width="100">a</td>
<td width="100">b</td>
</tr>
<tr>
<td width="100">a</td>
<td width="100">b</td>
</tr>
<tr>
<td width="100">a</td>
<td width="100">b</td>
</tr>
<tr>
<td width="100">a</td>
<td width="100">b</td>
</tr>
<tr>
<td width="100">a</td>
<td width="100">b</td>
</tr>
<tr>
<td width="100">a</td>
<td width="100">b</td>
</tr>
<tr>
<td width="100">a</td>
<td width="100">b</td>
</tr>
<tr>
<td width="100">a</td>
<td width="100">b</td>
</tr>
<tr>
<td width="100">a</td>
<td width="100">b</td>
</tr>
<tr>
<td width="100">a</td>
<td width="100">b</td>
</tr>
<tr>
<td width="100">a</td>
<td width="100">b</td>
</tr>
<tr>
<td width="100">a</td>
<td width="100">b</td>
</tr>
<tr>
<td width="100">a</td>
<td width="100">b</td>
</tr>
<tr>
<td width="100">a</td>
<td width="100">b</td>
</tr>
<tr>
<td width="100">a</td>
<td width="100">b</td>
</tr>
</table>
<script>
//
function setColor(curElement)
{
curElement.style.backgroundColor="#DDEEFF";
curElement.style.color="#000000";
}

function resetColor(curElement)
{
if(curElement.rowIndex%2==0){
curElement.style.backgroundColor="#E7E7E7";
}else{
curElement.style.backgroundColor="#FFFFFF";
}
curElement.style.color="black";
}

//动态产生一个层，用来控制每行颜色的变化
document.writeln('

');
var sTable = document.all.main_table;//得到指定表格id
if (sTable)
for (var i=0; i {
if(i%2==0){
sTable.rows[i].style.backgroundColor="#C2D8E0";
}else{
sTable.rows[i].style.backgroundColor="#ffffff";
}
//调用层中的方法，改变鼠标所在行的颜色
sTable.rows[i].onmouseover=document.all.onmouse.onmouseover;
sTable.rows[i].onmouseout=document.all.onmouse.onmouseout;
}

</script>

</td> </tr> </table>
↑返回目录
前一篇: 网页中一些常见的问题与解决代码
后一篇: 去掉字符串前后的空格