溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

JavaScript如何實(shí)現(xiàn)表格動(dòng)態(tài)變色

發(fā)布時(shí)間：2021-09-30 14:42:53 來(lái)源：億速云 閱讀：168 作者：柒染 欄目：開(kāi)發(fā)技術(shù)

JavaScript如何實(shí)現(xiàn)表格動(dòng)態(tài)變色，針對(duì)這個(gè)問(wèn)題，這篇文章詳細(xì)介紹了相對(duì)應(yīng)的分析和解答，希望可以幫助更多想解決這個(gè)問(wèn)題的小伙伴找到更簡(jiǎn)單易行的方法。

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

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

實(shí)現(xiàn)思路

1、獲取表格主體的所有行
2、css定義一個(gè)背景顏色類(lèi)
for循環(huán)遍歷，將每行都分別綁定onmouseover、onmouseout事件，
onmouseover（鼠標(biāo)經(jīng)過(guò)）- - - 該行類(lèi)名賦值定義好的背景顏色類(lèi)名
onmouseout（鼠標(biāo)離開(kāi)）- - - 該行類(lèi)名賦值空

注意：這里不用排他思想，用排他思想，鼠標(biāo)離開(kāi)的最后的一行會(huì)有顏色

代碼示例：

<!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>表格動(dòng)態(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>蘋(píng)果</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>

頁(yè)面效果：

JavaScript如何實(shí)現(xiàn)表格動(dòng)態(tài)變色

關(guān)于JavaScript如何實(shí)現(xiàn)表格動(dòng)態(tài)變色問(wèn)題的解答就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，如果你還有很多疑惑沒(méi)有解開(kāi)，可以關(guān)注億速云行業(yè)資訊頻道了解更多相關(guān)知識(shí)。

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手