js 动态加载table的tr 隔行换色

    最近没事做，写了个js 动态加载table的tr隔行换色，用了rowIndex 这个属性，贴上我研究的代码，鉴于本人的水平有限，见笑了,如果您有好的实现方法，欢迎交流一下，谢谢！

   

 

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 >
  

 

 

js代码

1   function fun(){
2        var tr=document.getElementsByTagName("tr");
3        for(var i=0;i < tr .length;i++)
4        {
5          tr[i].style.background =tr[i].rowIndex  % 2 ==0?"#F0FFF0":"white";
6         }
7    }
8    
9  window.onload =fun;

 

最终效果截图

 

 

小结

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

转载于:https://www.cnblogs.com/JAMJIA/archive/2010/03/05/1679469.html