zoukankan      html  css  js  c++  java
  • 隔行变色效果

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Interlaced discoloration</title>

    <style>
    table{
    200px;
    height: 300px;
    background-color: pink;
    text-align: center;
    margin:0 auto;
    border-spacing: 0;
    }
    </style>
    </head>
    <body>
    <table>
    <thead>
    <tr>
    <th>TH1</th>
    <th>TH2</th>
    <th>TH3</th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td>A1</td>
    <td>A2</td>
    <td>A3</td>
    </tr>
    <tr>
    <td>B1</td>
    <td>B2</td>
    <td>B3</td>
    </tr>
    <tr>
    <td>C1</td>
    <td>C2</td>
    <td>C3</td>
    </tr>
    <tr>
    <td>D1</td>
    <td>D2</td>
    <td>D3</td>
    </tr>
    <tr>
    <td>E1</td>
    <td>E2</td>
    <td>E3</td>
    </tr>
    <tr>
    <td>F1</td>
    <td>F2</td>
    <td>F3</td>
    </tr>
    </tbody>
    </table>

    <script>
    var trs = document.getElementsByTagName("tr");
    for(var i=1;i<trs.length;++i){
    trs[i].style.backgroundColor = i%2==0?"#f40":"#f10215";
    var temp = trs[i].style.backgroundColor;
    trs[i].setAttribute("temp",temp);
    trs[i].onmouseover = function () {
    this.style.backgroundColor = "lightgreen";
    }
    trs[i].onmouseout = function () {
    this.style.backgroundColor = this.getAttribute("temp");
    }


    }

    </script>

    </body>
    </html>
  • 相关阅读:
    Linux添加用户组和删除用户组
    购物意图分析
    架构是什么来的
    如何突破浏览器加载并发数的限制
    写JS自执行函数时要注意的
    网页是什么
    JVM
    javascript的边界
    浏览器
    HTTP
  • 原文地址:https://www.cnblogs.com/programfield/p/11001917.html
Copyright © 2011-2022 走看看