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:
|
<<: Lösen Sie das Problem, dass der MySQL-Verbindungsport belegt ist und Dateipfadfehler verursacht
>>: So erstellen Sie ein standardisiertes VMware-Image für Kubernetes unter Rancher
Artikel empfehlen
Die detaillierteste Methode zur Installation von Docker auf CentOS 8
Installieren Sie Docker unter CentOS 8 Offizielle...
Detaillierte Erklärung zweier Methoden zur Behebung eines Fehlers in der Justify-Content-Space-Between-Ausrichtung des Flex-Layouts
Wenn Sie „display:flex, justify-content: space-be...
Tutorial zur Installation von Ubuntu 20.04 und NVIDIA-Treibern
Installieren Sie Ubuntu 20.04 Installieren Sie NV...
Natives JS zum Implementieren der Seitenleiste zum Teilen
Dieser Artikel zeigt eine mit nativem JS implemen...
Informationen zur Verwendung von Keepalived zum Erreichen eines automatischen Neustarts von Nginx und einer hohen Verfügbarkeit von Dual Active Hot Standby
Inhaltsverzeichnis 1. Übersicht 2. Verwenden Sie ...
Mysql, einige komplexe SQL-Anweisungen (Abfragen und Löschen doppelter Zeilen)
1. Suchen Sie nach doppelten Zeilen Wählen Sie * ...
Tutorial zur Installation von lamp-php7.0 in einer Centos7.4-Umgebung
Dieser Artikel beschreibt, wie lamp-php7.0 in ein...
Analyse des GTK-Treeview-Prinzips und der Verwendung
Die GtkTreeView-Komponente ist eine erweiterte Ko...
Nginx-Praxis zur Optimierung hoher Parallelität
1. Notwendigkeit des Tunings Ich habe mich immer ...
Grafisches Tutorial zur Installation und Konfiguration von mysql 8.0.16 winx64.zip
In diesem Artikel wird der spezifische Code der I...
InnoDB-Typ MySql stellt Tabellenstruktur und Daten wieder her
Voraussetzung: Speichern Sie die .frm- und .ibd-D...
Verwenden Sie einfaches jQuery + CSS, um einen benutzerdefinierten Tooltip für Tag-Titel zu erstellen
Einführung Verwenden Sie einfaches jQuery+CSS, um ...
Verwendung von Vue3-Seiten, Menüs und Routen
Inhaltsverzeichnis 1. Klicken Sie auf das Menü, u...
Beispielanalyse von Linux-Dateiverwaltungsbefehlen [Anzeige, Ansicht, Statistiken usw.]
Dieser Artikel beschreibt die Linux-Dateiverwaltu...
JS verwendet Canvas-Technologie, um Echarts-Balkendiagramme zu imitieren
Canvas ist ein neues Tag in HTML5. Sie können js ...