JavaScript zum Erreichen aller oder umgekehrter Auswahlfunktionen
|
In diesem Artikel wird der spezifische JavaScript-Code zur Realisierung der Funktion „Alle auswählen“ oder „Auswahl umkehren“ zu Ihrer Information bereitgestellt. Der spezifische Inhalt ist wie folgt Der Code lautet wie folgt
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<title>Fall – Alle Tabellen auswählen</title>
<Stil>
Tisch {
Rand: 1px durchgezogen;
Rand: automatisch;
Breite: 500px;
}
td, th {
Textausrichtung: zentriert;
Rand: 1px durchgezogen;
}
.aus {
Hintergrundfarbe: weiß;
}
.über {
Hintergrundfarbe: rosa;
}
div{
Rand oben: 10px;
Textausrichtung: zentriert;
}
</Stil>
<Skript>
fenster.onload = Funktion () {
//Alles auswählen document.getElementById("checkAll").onclick = function () {
var cbs = document.getElementsByName("cb");
für (var i = 0; i < cbs.Länge; i++) {
cbs[i].checked = wahr;
}
}
//Alle abwählen document.getElementById("unCheckAll").onclick = function () {
var cbs = document.getElementsByName("cb");
für (var i = 0; i < cbs.Länge; i++) {
cbs[i].checked = falsch;
}
}
//Erneut prüfen document.getElementById("reCheck").onclick = function () {
var cbs = document.getElementsByName("cb");
für (var i = 0; i < cbs.Länge; i++) {
cbs[i].checked = !cbs[i].checked;
}
}
//Wenn die Maus darüberfährt, ändert sich die Farbe var trs = document.getElementsByTagName("tr");
für (var i = 0; i < trs.length; i++) {
trs[i].onmouseover = Funktion () {
dieser.Klassenname = "über";
}
trs[i].onmouseout = Funktion () {
dieser.Klassenname = "out";
}
}
//Das oberste Kontrollkästchen aktivieren und alles auswählen document.getElementById("firstCb").onclick = function () {
var cbs = document.getElementsByName("cb");
für (var i = 0; i < cbs.Länge; i++) {
cbs[i].checked = dies.checked;
}
}
}
</Skript>
</Kopf>
<Text>
<Tabelle>
<caption>Studenteninformationsformular</caption>
<tr>
<td><input Typ="Checkbox" Name="cb" ID="firstCb"></td>
<td>Nummer</td>
<td>Name</td>
<td>Geschlecht</td>
<td>Betrieb</td>
</tr>
<tr>
<td><Eingabetyp="Kontrollkästchen" Name="cb"></td>
<td>1</td>
<td>Linghu Chong</td>
<td>Männlich</td>
<td><a href="javascript:void(0);" onclick="delTr(this)">Löschen</a></td>
</tr>
<tr>
<td><Eingabetyp="Kontrollkästchen" Name="cb"></td>
<td>2</td>
<td>Lass mich gehen</td>
<td>Männlich</td>
<td><a href="javascript:void(0);" onclick="delTr(this)">Löschen</a></td>
</tr>
<tr>
<td><Eingabetyp="Kontrollkästchen" Name="cb"></td>
<td>3</td>
<td>Yue Buqun</td>
<td>?</td>
<td><a href="javascript:void(0);" onclick="delTr(this)">Löschen</a></td>
</tr>
</Tabelle>
<div>
<input type="button" value="Alles auswählen" id="checkAll">
<input type="button" value="Alle abwählen" id="unCheckAll">
<input type="button" value="Erneut prüfen" id="erneut prüfen">
</div>
</body>
</html>Ergebnisse der Operation
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:
|
>>: Remote-Entwicklung mit VSCode und SSH
Artikel empfehlen
LayUI+Shiro implementiert ein dynamisches Menü und erinnert sich an das Beispiel der Menüerweiterung
Inhaltsverzeichnis 1. Maven-Abhängigkeit 2. Menüb...
Der beste Weg, ein JAR-Paketprojekt unter einem Centos7-Server zu starten
Vorwort Jeder weiß, wie man ein JAR-Paket unter L...
Organisationsstruktur der Vue-Komponente und Details zur Komponentenregistrierung
Inhaltsverzeichnis 1. Komponentenorganisation 2. ...
So ändern Sie das Kennwort von mysql5.7.20 unter Linux CentOS 7.4
Nach dem Upgrade von MySQL auf Version 5.7 wurde ...
So schreiben Sie mit nodejs ein Tool zur Generierung von Entitätsklassen für Datentabellen für C#
Obwohl Microsoft T4-Vorlagen bereitstellt, finde ...
MySQL startet langsames SQL und analysiert die Ursachen
Schritt 1. Aktivieren Sie die langsame MySQL-Abfr...
SQL-Implementierung LeetCode (176. Zweithöchstes Gehalt)
[LeetCode] 176. Zweithöchstes Gehalt Schreiben Si...
Zusammenfassung zur Positionierung in CSS
Es gibt vier Arten der Positionierung in CSS, die...
Allgemeine Parameter für Popup-Fenster von IE-Webseiten können Sie selbst festlegen
Das Popup hat nichts damit zu tun, ob Ihr aktuelle...
Lösung zum Verlassen von Lücken zwischen BootStrap-Rastern
Inhaltsverzeichnis [Siehe ein Beispiel]: [Der urs...
Zusammenfassung der Probleme mit der horizontalen und vertikalen Zentrierung in HTML
Ich bin in letzter Zeit auf viele Zentrierungspro...
Bereitstellungs- und Installationsdiagramm für die Servervirtualisierung von VMware vSphere 6.0 (detaillierte Schritte)
1. Wichtige Punkte für die frühzeitige Planung de...
Detaillierte Erläuterung von drei Möglichkeiten, Docker-Container miteinander zu verbinden
Es gibt drei Möglichkeiten, Docker-Container mite...
Vue implementiert den Download von ZIP-Dateien
In diesem Artikelbeispiel wird der spezifische Co...
Eine kurze Einführung in Protobuf und ein Installationstutorial in der Ubuntu 16.04-Umgebung
Eine kurze Einführung in protobuf Protobuf ist Go...