7,js操作table.tBodies,tHead,tFoot,rows.cells

js操作table,获取tbody:tBodies, 获取thead:tHead; 获取tfoot:tFoot; 获取tr:rows; 获取td:cells;

鼠标移入变色:

<table>
    <thead>
        <td>序号</td>
        <td>姓名</td>
        <td>年龄</td>
        <td>操作</td>
    </thead>
    <tbody>
        <tr>
           <td>1</td>
           <td>刘一</td>
           <td>22</td>
           <td></td>
        </tr>
        <tr>
           <td>2</td>
           <td>浩二</td>
           <td>23</td>
           <td></td>
        </tr>
        <tr>
           <td>3</td>
           <td>张三</td>
           <td>25</td>
           <td></td>
        </tr>
        <tr>
           <td>4</td>
           <td>王伟</td>
           <td>22</td>
           <td></td>
        </tr>
        <tr>
           <td>5</td>
           <td>王三</td>
           <td>22</td>
           <td></td>
        </tr>
    </tbody>
    
</table>    <script>
    window.onload=function(){
        var oTab=document.getElementById('tab1');
        var aTr=oTab.tBodies[0].rows;
        //隔行变色;
var iBg='';
    for(var i=0;i<aTr.length;i++){ if(i%2=0){ aTr[i].style.background=' '; }else{ aTr[i].style.background='#ccc'; }
        
       //鼠标移动变色;
       aTr[i].onmouseover=function(){
          iBg=this.style.background;//保留原有的背景色;
          aTr[i].style.background='green';
}
       aTr[i]。onmouseout=function(){
         aTr[i].style.background=iBg;
       } }
       }
</script>

 

posted @ 2013-06-19 20:44  猫多多  阅读(1825)  评论(0编辑  收藏  举报