zoukankan      html  css  js  c++  java
  • Dom文本应用-表格隔行间亮样式

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

    一、表格隔行间亮样式-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表格元素保存在
      oTab
    var 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>

    三、效果截图

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

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

  • 相关阅读:
    全局变量和局部变量
    单例模式i
    高阶函数
    闭包和内存管理
    用python 写网络爬虫--零基础
    robots.txt 文件是什么? 如何获取
    Python: NLTK几个入门函数
    nltk book的下载
    nltk 环境安装( WINDOWS 7 32位 环境下)
    遇到问题
  • 原文地址:https://www.cnblogs.com/yswyzh/p/9771046.html
Copyright © 2011-2022 走看看