javascript表格隔行变色与移入高亮移出恢复

表格的隔行变色实现的方法也有多种，可以用CSS的选择器来实现，比如
:nth-of-type(odd){}/*奇数行*/
:nth-of-type(even){}/*偶数行*/
同样运用css背景的方法也可以实现。当然了，利用js做的表格隔行变色是比较好的做法，因为兼容好。也不废话了，上代码

<table>
  <th>
     <td>ID</td>
     <td>Name</td>
     <td>Age</td>
  </th> 
  <tr>
     <td>0</td>
     <td>张三</td>
     <td>20</td>
  </tr> 
  <tr>
     <td>1</td>
     <td>李四</td>
     <td>20</td>
  </tr> 
<table>

htm结构如上面;js如下

<script>
  var tab=document.getElementsByTagName("table")[0];
  //js获取表格的tbody和tr,td也可以用getElementsByTagName来获取
  //但是我们有更加简便的方法来获取
  var oldBgColor="";
  //用来记录移入时表格行的background
  for(var i=0;i<tab.tBodies[0].rows.length;i++){
      tab.tBodies[0].rows[i].style.background=i%2?"red":"orange";
      tab.tBodies[0].rows[i].onmouseover=function(){
        oldBgColor=this.style.background;
        this.style.background="yellow";
      }
        tab.tBodies[0].rows[i].onmouseout=function(){
        this.style.background=oldBgColor;
      }
    }
</script>

js内置tBodies,rows,cells这些获取表格的简便操作。如有错误，欢迎纠正，互励共勉。