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
Ein kurzes Verständnis der MySQL SELECT-Ausführungsreihenfolge
Die vollständige Syntax der SELECT-Anweisung laut...
Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.7.23
Dieser Artikel zeichnet den detaillierten Install...
Ausführliche Erläuterung der verschiedenen Methoden sowie der Vor- und Nachteile der JavaScript-Vererbung
Inhaltsverzeichnis 1. Vererbung der Prototypkette...
Vue-Kapselungskomponententool $attrs, $listeners-Verwendung
Inhaltsverzeichnis Vorwort $attrs Beispiel: $list...
jQuery implementiert das Bouncing-Ball-Spiel
In diesem Artikel wird der spezifische Code von j...
Super ausführliches Tutorial zur Installation von MySQL 8.0.23
Inhaltsverzeichnis Vorwort 1. Laden Sie MySQL von...
Zusammenfassung der Vorsichtsmaßnahmen beim Schreiben von EDM in HTML (allgemeine Vorsichtsmaßnahmen beim Senden von E-Mails)
Formatkodierung 1. Bitte stellen Sie die Seitenbr...
Centos7.3 So installieren und implementieren Sie Nginx und konfigurieren https
Installationsumgebung 1. gcc-Installation Um ngin...
Vue realisiert einfachen Effekt des Lauflichts
In diesem Artikel wird der spezifische Code von V...
Beispiel für die Konvertierung eines flachen JavaScript-Arrays in eine Baumstruktur
Inhaltsverzeichnis 10.000 Daten gingen im Hinterg...
Zusammenfassung mehrerer Implementierungen der Rückkehr zum Anfang in HTML-Seiten
Vor kurzem musste ich beim Entwickeln einer Websi...
Über die Implementierung des JavaScript-Karussells
Heute ist ein weiterer sehr praktischer Fall. All...
Detaillierte Erläuterung der DOM-Stileinstellungen in vier Reaktionskomponenten
1. Inline-Stile Um Inline-Stile zum virtuellen DO...
Analysieren Sie CSS, um die Farbfunktion des Bildthemas zu extrahieren (Tipps)
Hintergrund Alles begann, als ein Klassenkamerad ...
Lösung für das Problem des Datenverlusts bei Verwendung der Ersetzungsoperation in MySQL
Vorwort Die Entwickler des Unternehmens verwendet...