JavaScript实现鼠标经过表格行给出颜色标识

本文实例为大家分享了JavaScript实现鼠标经过表格行给出颜色标识，供大家参考，具体内容如下

代码：

!DOCTYPE htML>
    html lang="en">
    head>
        meta charset="UTF-8">
        meta http-equiv="X-UA-Compatible" content="IE=Edge">
        meta name="viewport" content="width=device-width, inITial-scale=1.0">
        title>
    Document/title>
        style>
        * {
                margin: 0;
                padding: 0;
        }
                table {
                margin: 100px auto;
                width: 800px;
                border-spacing: 0;
                text-align: center;
        }
                table tr:nth-child(1) {
                background-color: rgb(135, 206, 235);
        }
                table tr:nth-child(n+2) {
                border-bottom: 1px solid black;
        }
                th {
                font-Size: 14px;
                padding-top: 5px;
                padding-bottom: 5px;
        }
                td {
                font-size: 12px;
                padding-top: 8px;
                padding-bottom: 8px;
                color: blue;
                border-bottom: 1px solid lightgray;
        }
        /style>
    /head>
    body>
        table>
            tr>
                th>
    代码/th>
                th>
    名称/th>
                th>
    最新公布净值/th>
                th>
    累计净值/th>
                th>
    前单位净值/th>
                th>
    净值增长率/th>
            /tr>
            tr>
                td>
    003526/td>
                td>
    农银金穗3个月定期开放债券/td>
                td>
    1.075/td>
                td>
    1.079/td>
                td>
    1.074/td>
                td>
    +0.047%/td>
            /tr>
            tr>
                td>
    003526/td>
                td>
    农银金穗3个月定期开放债券/td>
                td>
    1.075/td>
                td>
    1.079/td>
                td>
    1.074/td>
                td>
    +0.047%/td>
            /tr>
            tr>
                td>
    003526/td>
                td>
    农银金穗3个月定期开放债券/td>
                td>
    1.075/td>
                td>
    1.079/td>
                td>
    1.074/td>
                td>
    +0.047%/td>
            /tr>
            tr>
                td>
    003526/td>
                td>
    农银金穗3个月定期开放债券/td>
                td>
    1.075/td>
                td>
    1.079/td>
                td>
    1.074/td>
                td>
    +0.047%/td>
            /tr>
            tr>
                td>
    003526/td>
                td>
    农银金穗3个月定期开放债券/td>
                td>
    1.075/td>
                td>
    1.079/td>
                td>
    1.074/td>
                td>
    +0.047%/td>
            /tr>
            tr>
                td>
    003526/td>
                td>
    农银金穗3个月定期开放债券/td>
                td>
    1.075/td>
                td>
    1.079/td>
                td>
    1.074/td>
                td>
    +0.047%/td>
            /tr>
        /table>
        script>
            VAR rows = document.querySelectorAll(' table tr:nth-child(n+2)');
            for (var i = 0;
     i  rows.length;
 i++) {
            rows[i].onmouseover = function() {
                    this.style.backgroundColor = "lightblue";
            }
            rows[i].onmouseout = function() {
                    this.style.backgroundColor = "";
            }
        }
        /script>
    /body>
    /html>
    

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

• js实现鼠标经过表格行变色的方法
• Javascript实现的鼠标经过时播放声音

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！