JavaScript は、マウスがテーブル行を通過するときに色の識別を実装します。

この記事では、マウスがテーブルの行を通過するときにJavaScriptを使用して色ラベルを表示する方法を紹介します。具体的な内容は次のとおりです。

コード：

<!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>
    <スタイル>
        * {
            マージン: 0;
            パディング: 0;
        }
        
        テーブル {
            マージン: 100px 自動;
            幅: 800ピクセル;
            境界線の間隔: 0;
            テキスト配置: 中央;
        }
        
        テーブルtr:n番目の子(1) {
            背景色: rgb(135, 206, 235);
        }
        
        テーブル tr:n番目の子(n+2) {
            border-bottom: 1px 黒一色;
        }
        
        番目 {
            フォントサイズ: 14px;
            パディング上部: 5px;
            パディング下部: 5px;
        }
        
        td {
            フォントサイズ: 12px;
            パディング上部: 8px;
            パディング下部: 8px;
            色: 青;
            border-bottom: 1px 実線ライトグレー;
        }
    </スタイル>
</head>

<本文>
    <テーブル>
        <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>
            +0.047%
        </tr>
        <tr>
            <td>003526</td>
            <td>中国農業銀行 金水 3ヶ月定期オープン債</td>
            <td>1.075</td>
            <td>1.079</td>
            <td>1.074</td>
            +0.047%
        </tr>
        <tr>
            <td>003526</td>
            <td>中国農業銀行 金水 3ヶ月定期オープン債</td>
            <td>1.075</td>
            <td>1.079</td>
            <td>1.074</td>
            +0.047%
        </tr>
        <tr>
            <td>003526</td>
            <td>中国農業銀行 金水 3ヶ月定期オープン債</td>
            <td>1.075</td>
            <td>1.079</td>
            <td>1.074</td>
            +0.047%
        </tr>
        <tr>
            <td>003526</td>
            <td>中国農業銀行 金水 3ヶ月定期オープン債</td>
            <td>1.075</td>
            <td>1.079</td>
            <td>1.074</td>
            +0.047%
        </tr>
        <tr>
            <td>003526</td>
            <td>中国農業銀行 金水 3ヶ月定期オープン債</td>
            <td>1.075</td>
            <td>1.079</td>
            <td>1.074</td>
            +0.047%
        </tr>


    </テーブル>

    <スクリプト>
        var rows = document.querySelectorAll('テーブルtr:nth-child(n+2)');
        (var i = 0; i < 行数.長さ; i++) {
            行[i].onmouseover = 関数() {
                this.style.backgroundColor = "ライトブルー";
            }
            行[i].onmouseout = 関数() {
                this.style.backgroundColor = "";
            }
        }
    </スクリプト>
</本文>

</html>

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: