JavaScript zum Erreichen eines dynamischen Farbwechsels der Tabelle

In diesem Artikel wird der spezifische Code für JavaScript zur dynamischen Farbänderung der Tabelle zu Ihrer Information bereitgestellt. Der spezifische Inhalt ist wie folgt

Die Tabelle ist in zwei Teile unterteilt: die Kopfzeile und den Hauptteil der Tabelle.

Wenn Sie zu einer Zeile im Tabellenkörper wechseln, ändert sich die Farbe dieser Zeile, um die Anzahl der ausgewählten Zeilen hervorzuheben. So ist leichter zu erkennen, welche Zeile ausgewählt ist.

Umsetzungsideen

1. Alle Zeilen des Tabellenkörpers abrufen
2. CSS definiert eine Hintergrundfarbklasse
Eine For-Schleife durchläuft jede Zeile und bindet Onmouseover- und Onmouseout-Ereignisse an sie.
onmouseover (mouse over) - - - Dem Klassennamen dieser Zeile wird der definierte Hintergrundfarbenklassenname zugewiesen
onmouseout (Maus geht) - - - Dem Klassennamen dieser Zeile wird ein leerer Wert zugewiesen

Hinweis: Hier ist kein exklusives Denken erforderlich. Wenn exklusives Denken verwendet wird, hat die letzte Linie, die die Maus hinterlässt, Farbe.

Codebeispiel:

<!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>Dynamische Farbänderung der Tabelle</title>
    <Stil>
        das {
            Hintergrundfarbe: rosa;
        }
        
        .bg {
            Hintergrundfarbe: grün;
        }
    </Stil>
</Kopf>

<Text>
    <table border="1" cellpadding="8" cellspacing="0" align="center">
        <Kopf>
            <tr>
                <th>Obst</th>
                <th>Gefällt mir-Angaben</th>
                <th>Saison</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Apfel</td>
                <td>☆☆☆☆☆</td>
                <td>Vier Jahreszeiten</td>
            </tr>
            <tr>
                <td>Banane</td>
                <td>☆☆☆</td>
                <td>Vier Jahreszeiten</td>
            </tr>
            <tr>
                <td>Trauben</td>
                <td>☆☆☆</td>
                <td>Sommer</td>
            </tr>
            <tr>
                <td>Durian</td>
                <td>☆☆☆☆☆☆☆☆</td>
                <td>Sommer</td>
            </tr>
            <tr>
                <td>Mango</td>
                <td>☆☆☆☆☆☆☆☆</td>
                <td>Sommer</td>
            </tr>
            <tr>
                <td>Wassermelone</td>
                <td>☆☆☆☆☆</td>
                <td>Sommer</td>
            </tr>
        </tbody>
    </Tabelle>
    <Skript>
        var tr = document.querySelector('tbody').querySelectorAll('tr');
        für (var i = 0; i < tr.length; i++) {
            tr[i].onmouseover = Funktion() {
                /* Exklusiver Algorithmus für (var i = 0; i < tr.length; i++) {
                    tr[i].Klassenname = '';
                } */
                dies.Klassenname = "bg";
            }
            tr[i].onmouseout = Funktion() {
                dieser.Klassenname = '';
            }
        }
    </Skript>
</body>

</html>

Seiteneffekt:

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:

Detaillierte Erklärung zur Implementierung dynamischer Tabellen in JavaScript
Detaillierte Erklärung dynamisch generierter Tabellen mit Javascript
JavaScript zum Erzielen eines dynamischen Tabelleneffekts
JavaScript zum Implementieren einer einfachen dynamischen Tabelle
JavaScript zum dynamischen Generieren von Tabellen auf Webseiten
Beispiel für die dynamische Generierung einer Tabelle mit JavaScript
Detaillierte Erklärung zur Generierung dynamischer Tabellen und dynamischer Effekte mit JavaScript

<<: Detailliertes Beispiel für MySQL-Joint-Tabellen-Update-Daten

>>: So zeigen Sie den Nginx-Konfigurationsdateipfad und den Ressourcendateipfad an

Müssen die Texte der Website noch gestaltet werden?

JavaScript zum Erreichen eines dynamischen Farbwechsels der Tabelle

Müssen die Texte der Website noch gestaltet werden?

Tipps zum Deaktivieren des Kompatibilitätsansichtsmodus von IE8 und IE9 mithilfe von HTML

So kapseln Sie Axios einfach in Vue

Was ist COLLATE in MYSQL?

Beispielcode zur Implementierung eines gepunkteten Rahmen-Scrolleffekts mit CSS

Detaillierte Erläuterung der Verwendung von Docker Commit

So verstehen Sie den einfachen Speichermodus der Statusverwaltung von Vue

Der Docker-Container wird direkt ausgeführt, um den öffentlichen IP-Vorgang über Ping abzurufen

Implementierungsschritte zum Aktivieren des Docker-Remote-Service-Links auf Cloud CentOS

Schritte zum Reparieren einer Beschädigung der Datei grub.cfg im Linux-System

Artikel empfehlen

So verwenden Sie die REM-Anpassung in Vue

Grundlegendes Lernprogramm zum Tabellen-Tag in HTML

Beispiel für die Bereitstellung von Spring Boot mit Docker

Analyse und Beschreibung von Netzwerkkonfigurationsdateien unter Ubuntu-System

Detaillierte Erläuterung der Fallstricke des Nginx-Proxy-Socket.io-Dienstes

Beispielcode zum Partitionieren und Formatieren einer Festplatte größer als 20 TB auf CentOS6

So installieren Sie die Linux-Onlinesoftware gcc online

In HTML eingebettetes Flash Lösung zum Einbetten von Flash-Dateien in den HTML-Webseitencode (Teil 1)

Unterschiede zwischen MySQL CHAR und VARCHAR beim Speichern und Lesen

Implementierung von MySQL Multi-version Concurrency Control MVCC

Karusselleffekte mit JavaScript implementieren

Warum der CSS-Attributwert clear:right im Detail nicht funktioniert

Zwei Möglichkeiten zum Deklarieren privater Variablen in JavaScript

Detaillierte Erklärung der MySQL EXPLAIN-Ausgabespalten

WeChat-Applet: benutzerdefinierter TabBar-Schrittdatensatz