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

HTML+CSS zum Erstellen einer Schaltfläche im Cyberpunk-Stil

JavaScript zum Erreichen eines dynamischen Farbwechsels der Tabelle

HTML+CSS zum Erstellen einer Schaltfläche im Cyberpunk-Stil

Mit HTML+CSS3 implementierte Anmeldeschnittstelle

Lernen Sie die Ausführungsreihenfolge von SQL-Abfragen von Grund auf

Ein einfaches Beispiel zur Implementierung einer Fuzzy-Abfrage in Vue

HTML-Tabellen-Tag-Tutorial (19): Zeilen-Tag

Installation und Bereitstellung des Linux-Tools Nethogs zur Überwachung der Netzwerkbandbreite nach Prozess

Vue-Komponente zur Realisierung einer Karussell-Animation

Detaillierte Erklärung der Lösung für den 404-Fehler von Tomcat

Docker-Compose-Schritte zum Konfigurieren der Spring-Umgebung

Eine kurze Analyse des Unterschieds zwischen und und wo in der MySQL-Verbindungsabfrage

Artikel empfehlen

HTML Gewichtsverlust Optimieren Sie HTML-Tags zum Erstellen von Webseiten

Detailliertes Tutorial zum Bereitstellen einer benutzerdefinierten Apollo-Umgebung mit Docker-Compose

Detaillierte Erläuterung des Kapselungsbeispiels für Netzwerkanforderungen

MySQL 5.7.17 Installations- und Konfigurations-Tutorial für Mac

Ein Protokoll einer Notfallreaktion nach einem Einbruch in einen Linux-Server (Zusammenfassung)

Docker-Installationstutorial: Erste Schritte (Anfängerausgabe)

Vue verwendet WebSocket, um die Chat-Funktion zu simulieren

So führen Sie Linux-Shell-Befehle in Docker aus

Feste Tabellenbreite table-layout: fest

MySQL-Sortierung zum Abrufen eines Ranking-Beispielcodes

Detaillierte Zusammenfassung häufig verwendeter MySQL-Funktionen

Implementierungsmethode für die Produktion und Bereitstellung von Docker Nginx-Containern

So zeigen Sie historische Befehle in Linux an und führen sie aus

Detailliertes Beispiel für eine Remote-Verbindung zu Docker mithilfe einer TLS-verschlüsselten Kommunikation

Vue implementiert Baumtabelle durch Elementbaumsteuerung