zoukankan      html  css  js  c++  java
  • Table隔行变色的JavaScript代码


    <table id="datatable">
    <tr>
    <td>脚本之家</td>
    </tr>
    <tr>
    <td>www.jb51.net</td>
    </tr>
    <tr>
    <td>脚本之家</td>
    </tr>
    <tr>
    <td>www.jb51.net</td>
    </tr>
    <tr>
    <td>脚本之家</td>
    </tr>
    <tr>
    <td>www.jb51.net</td>
    </tr>
    <tr>
    <td>脚本之家</td>
    </tr>
    <tr>
    <td>www.jb51.net</td>
    </tr>
    </table>
    <script>
    function showtable(){
    var color1 = "rgb(234,240,255)";
    var color2 = "rgb(255,255,255)";
    var bgColor = "rgb(255,255,193)";
    var trs = document.getElementById("datatable").getElementsByTagName("tr");
    for (var i=0;i<trs.length-1;i++){
    if (i%2==0) {
    trs[i].style.backgroundColor=color1;
    trs[i].onmouseover = function(){
    this.style.backgroundColor = bgColor;
    }
    trs[i].onmouseout = function(){
    this.style.backgroundColor = color1;
    }
    } else {
    trs[i].style.backgroundColor=color2;
    trs[i].onmouseover = function(){
    this.style.backgroundColor = bgColor;
    }
    trs[i].onmouseout = function(){
    this.style.backgroundColor = color2;
    }
    }
    }
    }
    showtable()
    </script>

  • 相关阅读:
    JS 集合
    JS 字典
    JS 链表
    JS 队列
    JS 栈
    JS 列表
    JS 数组
    IOS 提示无法下载程式问题
    ubuntu 下安装Go开发环境
    菜鸟看Redis(一)
  • 原文地址:https://www.cnblogs.com/rik28/p/3654678.html
Copyright © 2011-2022 走看看