JavaScript implementiert Farberkennung beim Überfahren der Tabellenzeile mit der Maus

In diesem Artikel erfahren Sie, wie Sie mit JavaScript Farbbeschriftungen erstellen, wenn die Maus über eine Tabellenzeile fährt. Der spezifische Inhalt ist wie folgt

Code:

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

<Kopf>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-kompatibel" content="IE=edge">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <title>Dokument</title>
    <Stil>
        * {
            Rand: 0;
            Polsterung: 0;
        }
        
        Tisch {
            Rand: 100px automatisch;
            Breite: 800px;
            Rahmenabstand: 0;
            Textausrichtung: zentriert;
        }
        
        Tabelle tr:ntes-Kind(1) {
            Hintergrundfarbe: RGB (135, 206, 235);
        }
        
        Tabelle tr:n-tes-Kind(n+2) {
            Rahmen unten: 1px tief schwarz;
        }
        
        das {
            Schriftgröße: 14px;
            Polsterung oben: 5px;
            Polsterung unten: 5px;
        }
        
        td {
            Schriftgröße: 12px;
            Polsterung oben: 8px;
            Polsterung unten: 8px;
            Farbe: blau;
            Rahmen unten: 1px durchgehend hellgrau;
        }
    </Stil>
</Kopf>

<Text>
    <Tabelle>
        <tr>
            <th>Code</th>
            <th>Name</th>
            <th>Zuletzt veröffentlichtes Nettovermögen</th>
            <th>Kumulierter Nettowert</th>
            <th>Vorheriger Einheitsnettowert</th>
            <th>Wachstumsrate des Nettovermögens</th>
        </tr>
        <tr>
            <td>003526</td>
            <td>3-monatige reguläre offene Anleihe Jinsui der Agricultural Bank of China</td>
            <td>1,075</td>
            <td>1,079</td>
            <td>1,074</td>
            +0,047 %
        </tr>
        <tr>
            <td>003526</td>
            <td>3-monatige reguläre offene Anleihe Jinsui der Agricultural Bank of China</td>
            <td>1,075</td>
            <td>1,079</td>
            <td>1,074</td>
            +0,047 %
        </tr>
        <tr>
            <td>003526</td>
            <td>3-monatige reguläre offene Anleihe Jinsui der Agricultural Bank of China</td>
            <td>1,075</td>
            <td>1,079</td>
            <td>1,074</td>
            +0,047 %
        </tr>
        <tr>
            <td>003526</td>
            <td>3-monatige reguläre offene Anleihe Jinsui der Agricultural Bank of China</td>
            <td>1,075</td>
            <td>1,079</td>
            <td>1,074</td>
            +0,047 %
        </tr>
        <tr>
            <td>003526</td>
            <td>3-monatige reguläre offene Anleihe Jinsui der Agricultural Bank of China</td>
            <td>1,075</td>
            <td>1,079</td>
            <td>1,074</td>
            +0,047 %
        </tr>
        <tr>
            <td>003526</td>
            <td>3-monatige reguläre offene Anleihe Jinsui der Agricultural Bank of China</td>
            <td>1,075</td>
            <td>1,079</td>
            <td>1,074</td>
            +0,047 %
        </tr>


    </Tabelle>

    <Skript>
        var Zeilen = document.querySelectorAll('Tabelle tr:n-tes Kind(n+2)');
        für (var i = 0; i < Zeilen.Länge; i++) {
            Zeilen[i].onmouseover = Funktion() {
                this.style.backgroundColor = "hellblau";
            }
            Zeilen[i].onmouseout = Funktion() {
                dieser.Stil.Hintergrundfarbe = "";
            }
        }
    </Skript>
</body>

</html>

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren: