JavaScript實現(xiàn)表格動態(tài)變色

更新時間：2021年09月30日 11:49:23 作者：qq_39111074

這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)表格動態(tài)變色，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了JavaScript實現(xiàn)表格動態(tài)變色的具體代碼，供大家參考，具體內(nèi)容如下

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

當移動到表格主體的行時，移動到哪一行，哪一行就變化顏色，區(qū)分我們選中的行數(shù)，更明顯的看到選中了哪一行

實現(xiàn)思路

1、獲取表格主體的所有行
2、css定義一個背景顏色類
for循環(huán)遍歷，將每行都分別綁定onmouseover、onmouseout事件，
onmouseover（鼠標經(jīng)過）- - - 該行類名賦值定義好的背景顏色類名
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>表格動態(tài)變色</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>季節(jié)</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>

頁面效果：