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 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:
|
<<: Detailliertes Beispiel für MySQL-Joint-Tabellen-Update-Daten
>>: So zeigen Sie den Nginx-Konfigurationsdateipfad und den Ressourcendateipfad an
Artikel empfehlen
So verstehen Sie den Unterschied zwischen ref toRef und toRefs in Vue3
Inhaltsverzeichnis 1. Grundlagen 1.Referenz 2. to...
So installieren Sie WSL2 Ubuntu20.04 unter Windows 10 und richten die Docker-Umgebung ein
WSL aktivieren Stellen Sie sicher, dass das Syste...
Ursachen und Lösungen für den MySQL-Fehler „zu viele Verbindungen“
Inhaltsverzeichnis Kurzzusammenfassung Heute Mitt...
Analyse der Ideen zur Implementierung vertikaler Tabellen auf zwei Arten im Vue-Projekt
Problembeschreibung In unseren Projekten sind hor...
Vollständiger Prozessdatensatz zur Fehlerbehebung bei MySQL DeadLock
【Autor】 Liu Bo: Leitender Datenbankmanager im Ctr...
Detaillierte Erläuterung der Visualisierungskomponente mit Vue zum Vergleichen der Unterschiede zwischen zwei Datensätzen
Inhaltsverzeichnis brauchen: Wichtige Punkte: Anh...
So verwenden Sie das Flex-Layout, um ein Scrollen des festen Inhaltsbereichs im Kopf zu erreichen
Das feste Layout des Seitenkopfes wurde zuvor mit...
Einführung in MySQL-Trigger, Erstellen von Triggern und Analyse von Nutzungsbeschränkungen
Dieser Artikel beschreibt anhand von Beispielen d...
Detailliertes grafisches Tutorial zur Installation, Inbetriebnahme und Grundkonfiguration von MySQL unter der Windows-Version
herunterladen: Schritt 1: Öffnen Sie die Website ...
Der Quellcode zeigt, warum Vue2 Daten und Methoden direkt abrufen kann
Inhaltsverzeichnis 1. Beispiel: Hiermit können Da...
So ändern Sie die Länge eines Eingabetextfelds entsprechend seinem Inhalt
Erste: Code kopieren Der Code lautet wie folgt: &l...
Hinweise zur Adresszuordnung von Gerätetreibern im Linux-Kernel
#include <asm/io.h> #define ioremap(Cookie,...
Detaillierte Erläuterung der Verwendung von MySQL-Profilen zur Analyse von langsamem SQL (Group Left Join ist effizienter als Unterabfrage)
Verwenden Sie ein Profil, um langsames SQL zu ana...
Detaillierte Erläuterung des SSR-Server-Side-Rendering-Beispiels von Vue
Warum Server-Side Rendering (SSR) verwenden? Bess...
Erfahren Sie, wie Sie die Selbstüberwachung von Apache SkyWalking schnell aktivieren
1. Aktivieren Sie Prometheus-Telemetriedaten Stan...