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>

 

转载于:https://www.cnblogs.com/maoduoduo/p/3144839.html