js 动态加载table的tr并隔行换色(变色)的实现代码

1、html代码

<table style="BORDER-COLLAPSE:collapse" cellSpacing=0 width=600 align=center  border=1 cellpadding="0" bordercolor="#CCCCCC">
  <tr>
    <td width="200px;">a</td>
    <td width="200px;">sd</td>
     <td width="200px;">asdf</td
  </tr>
  <tr>
    <td width="200px;">b</td>
    <td width="200px;">a</td>
     <td width="200px;">a</td
  </tr>
  <tr>
    <td width="200px;">c</td>
    <td width="200px;">a</td>
     <td width="200px;">a</td
  </tr>
   <tr>
    <td width="200px;">c</td>
    <td width="200px;">a</td>
     <td width="200px;">a</td
  </tr>
   <tr>
    <td width="200px;">c</td>
    <td width="200px;">a</td>
     <td width="200px;">a</td
  </tr>
</table>

2、js代码

<script language="javascript:>
function fun(){
var tr=document.getElementsByTagName("tr");
for(var i=0;i<tr.length;i++)
{
  tr[i].style.background=tr[i].rowIndex % 2==0?"#F0FFF0":"white";
  }
}
window.onload=fun;
</script>

效果如下图所示，当然具体的样式，自己可以好好修饰下。

备注：
rowIndex 用于判断当前单元格所处行的索引（从0开始）
cellIndex 用于判断当前单元格所处列的索引（从0开始）

您可能感兴趣的文章：
js 隔行变色与鼠标悬停自动变色的实现代码
JS控制表格隔行变色的实现代码
js 隔行变色的最简单代码
js 动态加载table的tr并隔行换色(变色)的实现代码
jQuery 表格隔行换色 鼠标高亮行变色的实现代码
javascript实现隔行变色函数代码一例
Js实现表格隔行变色，鼠标经过时高亮显示的代码
js 隔行变色 鼠标经过变色的代码
Js表格隔行换色(隔行变色)代码一例
JQuery实现表格隔行换色(隔行变色)效果代码一例