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
React realisiert den gesamten Prozess des Seitenwasserzeicheneffekts
Inhaltsverzeichnis Vorwort 1. Anwendungsbeispiele...
Informationen zum Konfigurationsproblem bei der Verbindung von MyBatis mit der MySql8.0-Version
Beim Erlernen von Mybatis ist mir ein Fehler aufg...
HTML-Grundlagen-Zusammenfassungsempfehlung (Titel)
HTML: Titel Überschriften werden durch Tags wie &...
Das Problem, dass jquery.form.js den Zugriff im IE verweigert und der Input-Upload-Button aktiv angeklickt werden muss
Schauen wir uns zunächst den Code an <form id=...
Detaillierte Erklärung zum Ändern des Standardstils der externen Komponente Vant basierend auf der Vue-CLI-Entwicklung
Inhaltsverzeichnis Vorwort 1. Weniger 2. Importie...
5 Tipps zum Schutz Ihres MySQL Data Warehouse
Durch die Aggregierung von Daten aus verschiedene...
Das obere feste Div kann auf einen halbtransparenten Effekt eingestellt werden
Code kopieren Der Code lautet wie folgt: <!DOC...
Sprechen Sie über implizite Konvertierung in MySQL
Im Laufe der Arbeit werden Sie auf viele Fälle im...
Eine kurze Erläuterung zum Abbrechen von Anfragen und zum Verhindern doppelter Anfragen in Axios
Inhaltsverzeichnis Vorwort Kern - CancelToken Pra...
MySql fügt Daten erfolgreich ein, meldet aber [Err] 1055 Fehlerlösung
1. Frage: Ich habe in diesen Tagen Einfügevorgäng...
Vue-Komponente kapselt Beispielcode zum Hochladen von Bildern und Videos
Laden Sie zuerst die Abhängigkeiten herunter: cnp...
Der Unterschied zwischen ENTRYPOINT und CMD in Dockerfile
Im Lernprogramm zum Docker-System haben wir geler...
MySQL-Abfragebaumstrukturmethode
Inhaltsverzeichnis MySQL-Abfragebaumstruktur 1. Ü...
Einfaches Beispiel für den Grenzwertparameter der MySQL-Paging
Zwei Parameter der MySQL-Paging Wählen Sie * aus ...
Testfragen und Referenzantworten zum Thema Webdesign und Produktion
<br />Test zu Webdesign und -produktion, Tei...