表格隔行变色的js实现代码

发布时间:2020-05-13编辑:脚本学堂
js代码实现表格的隔行变色,有需要的朋友,可以参考下。

隔行变色的完整代码。
 

复制代码 代码示例:

<table width="800" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>不变色</td>
</tr>
<tbody id="goaler">
<tr>
<td>脚本学堂,欢迎大家的光临。</td>
</tr>
<tr>
<td>脚本学堂,欢迎大家的光临。</td>
</tr>
<tr>
<td>脚本学堂,欢迎大家的光临。</td>
</tr>
<tr>
<td>脚本学堂,欢迎大家的光临。</td>
</tr>
</tbody>
<tr>
<td>不变色</td>
</tr>
</table>

<script language="javascript">
<!--
var TbRow = document.getElementById("goaler");
if (TbRow != null)
{
for (var i=0;i<TbRow.rows.length ;i++ )
{
if (TbRow.rows[i].rowIndex%2==1)
{
TbRow.rows[i].style.backgroundColor="";
}
else
{
TbRow.rows[i].style.backgroundColor="#F1F1F1";
}
}
}
//-->
</script>

 

效果如下图所示:
表格隔行换色
 

您可能感兴趣的文章:
js 隔行变色的最简单代码
js 隔行变色 鼠标经过变色的代码
JS控制表格隔行变色的实现代码
js 隔行变色与鼠标悬停自动变色的实现代码
js+css 控制表格隔行变色与单行高亮的代码
Js与Css结合实现表格隔行换色(隔行变色)的代码
Js表格隔行换色(隔行变色)代码一例
Js实现表格隔行变色,鼠标经过时高亮显示的代码
javascript实现隔行变色函数代码一例