JavaScript zum dynamischen Laden und Löschen von Tabellen
|
In diesem Artikel wird der spezifische JavaScript-Code zum dynamischen Laden und Löschen von Tabellen zu Ihrer Information bereitgestellt. 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>
Tisch {
Rand: 100px automatisch;
Breite: 500px;
Rahmen-Zusammenbruch: Zusammenbruch;
}
das {
Rand: 1px durchgehend grau;
Hintergrundfarbe: hellgrau;
Höhe: 30px;
}
td {
Textausrichtung: zentriert;
Rand: 1px durchgehend grau;
}
</Stil>
</Kopf>
<Text>
<Tabelle>
<Kopf>
<th>Name</th>
<th>Betreff</th>
<th>Ergebnisse</th>
<th>Betrieb</th>
</thead>
<tbody>
</tbody>
</Tabelle>
<Skript>
var tbd = document.querySelector('tbody');
var info = [{
Name: 'kathy',
Betreff: "Javascript",
Punktzahl: 60
}, {
Name: 'Milla',
Betreff: "Java",
Punktzahl: 100
}, {
Name: 'kiki',
Betreff: "Python",
Punktzahl: 80
}, {
Name: 'linda',
Betreff: "jquery",
Punktzahl: 70
}]
var info_list = [];
für (var i = 0; i < info.Länge; i++) {
console.log(info[i]['Betreff']);
var str = "<tr><td>" + info[i]['name'] + "</td>" + "<td>" + info[i]['betreff'] + "</td>" + "<td>" + info[i]['punktzahl'] + "</td>" + "<td><a href = javascript:;>Löschen</a></td>" + "</tr>";
info_list.push(str);
}
tbd.innerHTML = info_list.join('');
var löscht = document.querySelectorAll('a');
für (var i = 0; i < löscht.Länge; i++) {
löscht[i].onclick = function() {
tbd.removeChild(dieser.parentNode.parentNode);
}
}
</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:
|
<<: Ein tiefes Verständnis der spitzen Klammern in Bash (für Anfänger)
Artikel empfehlen
So deinstallieren Sie MySQL 5.7.19 unter Linux
1. Finden Sie heraus, ob MySQL zuvor installiert ...
So verwenden Sie die HTML-Formularattribute „schreibgeschützt“ und „deaktiviert“
1. readonly Nur-Lese-Attribut, so dass Sie den Wer...
Installation von Docker CE auf Ubuntu
Dieser Artikel dient zur Aufzeichnung der Install...
Implementierung effektiver Benutzergruppen und anfänglicher Benutzergruppen in Linux
Überprüfen Sie zuerst die Datei /etc/group: [root...
JavaScript implementiert eine Warteschlange mit doppeltem Ende
In diesem Artikelbeispiel wird der spezifische Co...
Problem mit der Groß-/Kleinschreibung in der MySQL-Datenbank
In MySQL entsprechen Datenbanken Verzeichnissen i...
Was sind die neuen CSS-Pseudoklassenfunktionen :where und :is?
Was sind :is und :where? :is() und :where() sind ...
Ursachen und Lösungen für Verzögerungen bei der MySQL Master-Slave-Replikation
Inhaltsverzeichnis Ein kurzer Überblick über die ...
Lösung für Vues Unfähigkeit, Array-Änderungen zu beobachten
Inhaltsverzeichnis 1. Vue-Listener-Array 2. Situa...
So überprüfen Sie die Speichernutzung unter Linux
Bei der Behebung von Systemproblemen, Anwendungsv...
Detaillierte Erklärung des VueRouter-Routings
Inhaltsverzeichnis Vue-Router 1. Verstehen Sie da...
So fügen Sie einen Docker-Port hinzu und erhalten eine Docker-Datei
Holen Sie sich das Dockerfile aus dem Docker-Imag...
Fassen Sie den User-Agent beliebter Browser zusammen
1. Grundkenntnisse: HTTP-Header-Benutzeragent Use...
Detaillierte Erläuterung des Prinzips der Vue-Überwachungsdaten
<Text> <div id="Wurzel"> &l...
Zusammenfassung der Tipps zum Festlegen der maximalen Anzahl von Verbindungen in MySQL
Methode 1: Befehlszeilenänderung Wir müssen nur d...