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

Zusammenfassung der 16 XHTML1.0- und HTML-Kompatibilitätsrichtlinien

Zusammenfassung gängiger MySQL-Funktionsbeispiele [Aggregatfunktionen, Zeichenfolgen, Zahlen, Zeit- und Datumsverarbeitung usw.]

Artikel

JavaScript zum Erreichen eines dynamischen Farbwechsels der Tabelle

Zusammenfassung der 16 XHTML1.0- und HTML-Kompatibilitätsrichtlinien

Vue Uniapp realisiert den Segmentierungseffekt

MySql legt die angegebenen Benutzerdatenbankansichtsabfrageberechtigungen fest

Das Konzept und die Eigenschaften von benutzerdefinierten MySQL-Variablen

Beispiel für die Einrichtung eines Third-Level-Domain-Namens in nginx

4 Möglichkeiten zur Implementierung von Routing-Übergangseffekten in Vue

Detaillierte Erklärung, wie Sie mit CSS einige Pixel Leerraum unter einem Bild freigeben können

So installieren und implementieren Sie einen Gitlab-Server auf CentOS7

Schnelle Implementierung der Schritte zur Bereitstellung von Docker-Images in Intellij IDEA

Zusammenfassung gängiger MySQL-Funktionsbeispiele [Aggregatfunktionen, Zeichenfolgen, Zahlen, Zeit- und Datumsverarbeitung usw.]

Artikel empfehlen

So stellen Sie Confluence und Jira-Software in Docker bereit

Warum Entwickler Datenbanksperren im Detail verstehen müssen

Grafisches Tutorial zur Installation und Konfiguration der kostenlosen Installationsversion von MySQL 5.7.16

So löschen Sie Dateinamen oder Verzeichnisse mit Sonderzeichen in Linux

Installation und Verwendung der MySQL MyCat-Middleware

Zusammenfassung von 4 Lösungen zum Zurückgeben von Werten auf WeChat Mini-Programmseiten

So richten Sie den Start einer JAR-Anwendung unter CentOS7 ein

Spezifische Verwendung von MySQL-Fensterfunktionen

js native Karussell-Plugin-Produktion

So verwenden Sie Webstorm und Chrome zum Debuggen von Vue-Projekten

MySQL praktische Fensterfunktion SQL-Analyse Klasse Testergebnisse und Lebenshaltungskosten Studenten

Standardzusammenfassung zur Analyse der Leistung einer SQL-Anweisung

Detaillierte Erklärung zum Erstellen mehrerer Instanzen von MySQL 5.6 in einer CentOS7-Umgebung

Detaillierte Erklärung des Vue-Lebenszyklus

Erklären Sie TypeScript-zugeordnete Typen und eine bessere wörtliche Typinferenz.