テーブルの動的な色の変更を実現するJavaScript

この記事では、テーブルの動的な色の変更を実現するためのJavaScriptの具体的なコードを参考までに紹介します。具体的な内容は次のとおりです。

表は、ヘッダーと表本体の 2 つの部分に分かれています。

表本体の行に移動すると、移動先の行の色が変わり、選択した行数が区別されるため、どの行が選択されているかがわかりやすくなります。

実装のアイデア

1. テーブル本体のすべての行を取得する
2. CSSは背景色クラスを定義する
For ループは各行をトラバースし、onmouseover イベントと onmouseout イベントをバインドします。
onmouseover (マウスオーバー) - - - この行のクラス名には、定義された背景色のクラス名が割り当てられます
onmouseout (マウスが離れる) - - - この行のクラス名には空の値が割り当てられます

注意: ここでは排他的思考は必要ありません。排他的思考を使用すると、マウスが残した最後の行に色が付きます。

コード例:

<!DOCTYPE html>
<html lang="ja">

<ヘッド>
    <メタ文字セット="UTF-8">
    <meta http-equiv="X-UA-compatible" content="IE=edge">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>テーブルの動的な色の変更</title>
    <スタイル>
        番目 {
            背景色: ピンク;
        }
        
        .bg {
            背景色: 緑;
        }
    </スタイル>
</head>

<本文>
    <表の境界線="1" セルパディング="8" セル間隔="0" 配置="中央">
        <頭>
            <tr>
                <th>果物</th>
                <th>いいねレベル</th>
                <th>シーズン</th>
            </tr>
        </thead>
        <t本文>
            <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>
    </テーブル>
    <スクリプト>
        var tr = document.querySelector('tbody').querySelectorAll('tr');
        (var i = 0; i < tr.length; i++) の場合 {
            tr[i].onmouseover = 関数() {
                /* 排他的アルゴリズム for (var i = 0; i < tr.length; i++) {
                    tr[i].className = '';
                } */
                this.className = 'bg';
            }
            tr[i].onmouseout = 関数() {
                this.className = '';
            }
        }
    </スクリプト>
</本文>

</html>

ページ効果: