zoukankan      html  css  js  c++  java
  • 表格隔行变色案例

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    * {
    padding: 0;
    margin: 0;
    }

    .wrap {
    500px;
    margin: 100px auto 0;
    }

    table {
    border-collapse: collapse;
    border-spacing: 0;
    border: 1px solid #c0c0c0;
    500px;
    cursor: pointer;
    }

    th,
    td {
    border: 1px solid #d0d0d0;
    color: #404060;
    padding: 10px;
    }

    th {
    background-color: #09c;
    font: bold 16px "微软雅黑";
    color: #fff;
    }

    td {
    font: 14px "微软雅黑";
    }

    tbody tr {
    background-color: pink;
    }
    </style>
    </head>
    <body>
    <div class="wrap">
    <table>
    <thead>
    <tr>
    <th>序号</th>
    <th>姓名</th>
    <th>课程</th>
    <th>成绩</th>
    </tr>
    </thead>
    <tbody id="j_tb">
    <tr>
    <td>
    1
    </td>
    <td>柳岩</td>
    <td>语文</td>
    <td>100</td>

    </tr>
    <tr>
    <td>
    2
    </td>
    <td>苍老师</td>
    <td>日语</td>
    <td>100</td>
    </tr>
    <tr>
    <td>
    3
    </td>
    <td>凤姐</td>
    <td>营销学</td>
    <td>100</td>
    </tr>
    <tr>
    <td>
    4
    </td>
    <td>芙蓉姐姐</td>
    <td>数学</td>
    <td>10</td>
    </tr>
    <tr>
    <td>
    5
    </td>
    <td>佐助</td>
    <td>英语</td>
    <td>100</td>
    </tr>
    <tr>
    <td>
    6
    </td>
    <td>卡卡西</td>
    <td>体育</td>
    <td>100</td>
    </tr>
    <tr>
    <td>
    7
    </td>
    <td>乔峰</td>
    <td>体育</td>
    <td>100</td>
    </tr>
    </tbody>
    </table>
    </div>
    <script src="../DOM/commer.js"></script>
    <script>
    var trs=ver("j_tb").getElementsByTagName("tr");
    for(var i=0;i<trs.length;i++){
    trs[i].style.backgroundColor=i%2==0?"red":"yellow";
    //鼠标进入
    trs[i].onmouseover=mouseoverHandle;
    //鼠标离开
    trs[i].onmouseout=mouseoutHandle;
    }
    var lastColor="";//先保存原来的颜色,鼠标离开后可还原
    function mouseoverHandle() {
    lastColor=this.style.backgroundColor;
    this.style.backgroundColor="blue";
    }
    function mouseoutHandle() {
    this.style.backgroundColor=lastColor;
    }

    </script>
    </body>
    </html>
  • 相关阅读:
    快速切题 sgu102.Coprimes 欧拉函数 模板程度 难度:0
    快速切题 sgu104. Little shop of flowers DP 难度:0
    poj 1163 The Triangle 搜索 难度:0
    sgu101 欧拉路径 难度:1
    快速切题 poj3414 Pots
    xml学习
    linux
    常用排序算法
    C++面试题目
    软件工程的一些问题
  • 原文地址:https://www.cnblogs.com/lujieting/p/10058716.html
Copyright © 2011-2022 走看看