Dom文本应用-表格隔行间亮样式

Posted 2021-01-11 yswyzh

效果：  隔行一个颜色，鼠标移上去，被选中的那一行就变颜色，其次，鼠标离开其区域，颜色又变回原来的颜色。

一、表格隔行间亮样式-html代码

　　首先我们要有个表格

　　

 1 <table id=‘tab1‘ border=1 , align=‘center‘ ,, solid>
 2 <thead>
 3 <td>编号</td><td>姓名</td><td>年龄</td>
 4 <thead>
 5 <tbody >
 6 <tr><td>001</td><td>杨家将</td><td>24</td></tr>
 7 <tr><td>002</td><td>钟女神</td><td>20</td></tr>
 8 <tr><td>003</td><td>方大佬</td><td>23</td></tr>
 9 <tr><td>004</td><td>翁少爷</td><td>23</td></tr>
10 </tbody>
11 </table>

二、添加js代码

　　在window.onload加载完窗口后执行代码

　　

<script>
window.onload = function(){
    var oTab = document.getElementById(‘tab1‘);    //获取table表格元素保存在
　　oTabvar oldColr = ‘‘;　　　　　　　　　　　　　　　　　//保存原来行间的颜色
    for(var i=0;i<oTab.tBodies[0].rows.length;i++){   //for循环多少行 rows代表行，tBodies代表第一个表格tbody
    
        oTab.tBodies[0].rows[i].onmouseover = function(){   //添加移动事件
            oldColr = this.style.background;　　　　　　　　　//将自己原本的颜色赋值给空字符串
            this.style.background = ‘green‘;                //移入变绿色
            }
        oTab.tBodies[0].rows[i].onmouseout = function(){    //添加移出事件
            this.style.background = oldColr;                //将之前保存的老颜色，赋值给自己
            }    
    
        if(i%2){　　　　
            oTab.tBodies[0].rows[i].style.background = ‘#CCC‘;
            }else{
                oTab.tBodies[0].rows[i].style.background = ‘red‘;
                }    
                
        }
    
    
    
    };


</script>

三、效果截图

   鼠标放在第一行，第一行变绿色

  鼠标离开，则变回原来的颜色