JavaScript實現表格動態變色

Posted on by

本文實例為大傢分享瞭JavaScript實現表格動態變色的具體代碼，供大傢參考，具體內容如下

表格分為：表頭、表格主體 兩部分

當移動到表格主體的行時，移動到哪一行，哪一行就變化顏色，區分我們選中的行數，更明顯的看到選中瞭哪一行

實現思路

1、獲取表格主體的所有行
2、css定義一個背景顏色類
for循環遍歷，將每行都分別綁定onmouseover、onmouseout事件，
onmouseover（鼠標經過）- – – 該行類名賦值定義好的背景顏色類名
onmouseout（鼠標離開）- – – 該行類名賦值空

註意：這裡不用排他思想，用排他思想，鼠標離開的最後的一行會有顏色

代碼示例：

<!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>表格動態變色</title>
    <style>
        th {
            background-color: pink;
        }
        
        .bg {
            background-color: green;
        }
    </style>
</head>

<body>
    <table border="1" cellpadding="8" cellspacing="0" align="center">
        <thead>
            <tr>
                <th>水果</th>
                <th>喜歡程度</th>
                <th>季節</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>蘋果</td>
                <td>☆☆☆☆☆</td>
                <td>四季</td>
            </tr>
            <tr>
                <td>香蕉</td>
                <td>☆☆☆</td>
                <td>四季</td>
            </tr>
            <tr>
                <td>葡萄</td>
                <td>☆☆☆</td>
                <td>夏季</td>
            </tr>
            <tr>
                <td>榴蓮</td>
                <td>☆☆☆☆☆☆☆</td>
                <td>夏季</td>
            </tr>
            <tr>
                <td>芒果</td>
                <td>☆☆☆☆☆☆☆</td>
                <td>夏季</td>
            </tr>
            <tr>
                <td>西瓜</td>
                <td>☆☆☆☆☆</td>
                <td>夏季</td>
            </tr>
        </tbody>
    </table>
    <script>
        var tr = document.querySelector('tbody').querySelectorAll('tr');
        for (var i = 0; i < tr.length; i++) {
            tr[i].onmouseover = function() {
                /* 排他算法
                for (var i = 0; i < tr.length; i++) {
                    tr[i].className = '';
                } */
                this.className = 'bg';
            }
            tr[i].onmouseout = function() {
                this.className = '';
            }
        }
    </script>
</body>

</html>

頁面效果：

以上就是本文的全部內容，希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。

推薦閱讀：