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
JavaScript implementiert Produktdetails der E-Commerce-Plattform
In diesem Artikel wird ein allgemeines Beispiel f...
Beispiele für die Verwendung von „Provide“ und „Inject“ in Vue2.0/3.0
Inhaltsverzeichnis 1. Was ist der Nutzen von Prov...
So handhaben Sie den Token-Ablauf in WeChat-Miniprogrammen
Inhaltsverzeichnis Fazit zuerst Frage Lösung Verw...
Detaillierte Erläuterung des Grafikbeispiels für Vue-Überwachungsattribute
Inhaltsverzeichnis Was ist die Listener-Eigenscha...
So richten Sie den PostgreSQL-Start unter Ubuntu 16.04 ein
Da PostgreSQL kompiliert und installiert ist, müs...
MySQL-Schleife fügt zig Millionen Daten ein
1. Erstellen Sie eine Testtabelle Tabelle `mysql_...
Detaillierte Installations- und Konfigurationsschritte für die MySQL 5.7-Zip-Version (Zip-Version)
Vorwort: Ich habe Win10 neu installiert und gleic...
Was sind die Unterschiede zwischen var let const in JavaScript
Inhaltsverzeichnis 1. Wiederholte Erklärung 1,1 v...
So importieren, registrieren und verwenden Sie Komponenten in Stapeln in Vue
Vorwort Komponenten sind etwas, das wir sehr häuf...
Detaillierte Erklärung wichtiger Kaskadierungskonzepte in CSS
Kürzlich stieß ich im Verlauf des Projekts auf ei...
JS implementiert den Beispielcode der Dezimalkonvertierung in Hexadezimal
Vorwort Beim Schreiben von Code stoßen wir gelege...
HTML-Tutorial: Horizontales Liniensegment in HTML
<br />Dieses Tag kann eine horizontale Linie...
Einführung in 10 Hooks in React
Inhaltsverzeichnis Was ist ReactHook? React biete...
Vue implementiert eine kleine Wettervorhersageanwendung
Dies ist eine Website, die ich nachgeahmt habe, a...
Führt diese SQL-Schreibmethode wirklich dazu, dass der Index fehlschlägt?
Vorwort Im Internet gibt es häufig Artikel, die v...