Tabellen dynamisch in HTML hinzufügen_PowerNode Java Academy
|
Ohne weitere Umschweife werde ich den Code direkt für Sie posten. Der spezifische Code lautet wie folgt:
<html>
<head><title>Tabelle</title></head>
<Text>
<Tabellengrenze="1">
<Kopf>
<tr>
<td>Vorname</td>
<td>Nachname</td>
<td> </td>
</tr>
<Kopf>
<tbody id="tb">
<tr id="1.">
<td>Vertrauen</td>
<td>Drei</td>
<td><input type="button" value="Hinzufügen" onclick="add()">
<input type="button" value="Entf" onclick="del(this)"></td>
</tr>
</tbody>
</Tabelle>
</body>
</html>
<Skript>
Funktion add() {
var trObj = document.createElement("tr");
trObj.id = neues Date().getTime();
trObj.innerHTML = "<td><input name='Vorname'/></td><td><input name='Nachname'/></td><td><input type='button' value='Hinzufügen' onclick='add()'> <input type='button' value='Entf' onclick='del(this)'></td>";
document.getElementById("tb").appendChild(trObj);
}
Funktion del(Objekt) {
var trId = obj.parentNode.parentNode.id;
var trObj = document.getElementById(trId);
document.getElementById("tb").removeChild(trObj);
}
</Skript>Im obigen Code konstruieren wir zunächst eine Tabelle im Textkörper. Um nachfolgende Operationen zu erleichtern, fügen wir der Tabelle thead- und tbody-Tags hinzu. Das thead-Tag gibt den Tabellenkopf an und das tbody-Tag den Tabellentext. Die Tabelle im Beispiel hat drei Spalten: Die erste Spalte enthält den Vornamen, die zweite Spalte enthält den Nachnamen und die dritte Spalte ist die Operationsspalte. Die Spalte „Operation“ enthält zwei Operationen: Eine dient zum Hinzufügen einer Zeile zur Tabelle und die andere zum Löschen der aktuellen Zeile. Die Vorgänge zum Hinzufügen und Löschen von Zeilen sind jeweils an zwei Schaltflächen gebunden. Wenn auf die Schaltfläche geklickt wird, werden die entsprechenden Vorgänge zum Hinzufügen und Löschen von Zeilen ausgelöst. Zeile hinzufügen (Methode)
Funktion add() {
var trObj = document.createElement("tr");
trObj.id = neues Date().getTime();
trObj.innerHTML = "<td><input name='Vorname'/></td><td><input name='Nachname'/></td><td><input type='button' value='Hinzufügen' onclick='add()'> <input type='button' value='Entf' onclick='del(this)'></td>";
document.getElementById("tb").appendChild(trObj);
}Die erste Zeile erstellt ein tr-Element, also eine Tabellenzeile. Die zweite Zeile, Die dritte Zeile, Die vierte Zeile, Methode „Zeile löschen“
Funktion del(Objekt) {
var trId = obj.parentNode.parentNode.id;
var trObj = document.getElementById(trId);
document.getElementById("tb").removeChild(trObj);
}In der Löschmethode wird ein Parameter übergeben. In der Zeilenaddiermethode können wir sehen, dass der Parameter this in der Löschmethode del übergeben wird. Das this im Seitencode bezieht sich auf das aktuelle HTML-Element, also das <input>-Feld, in dem sich this befindet. Die erste Zeile, Die zweite Zeile, Die dritte Zeile, Mangel Der obige Code implementiert grundsätzlich die Funktion zum dynamischen Hinzufügen und Löschen von Zeilen in der Tabelle, der Code weist jedoch immer noch Mängel auf, hauptsächlich in den folgenden zwei Punkten: 1 Die Tabellenbreite ändert sich vor und nach dem Hinzufügen von Zeilen Vorderseite hinzufügen
Nach dem Hinzufügen einer Zeile
Nach dem Hinzufügen von Zeilen werden die Tabellenspalten breiter 2 Der chinesische Text auf der vom Browser geöffneten Standardseite ist verstümmelt
Sie müssen die Zeichenkodierung festlegen, um das Seitenkodierungsformat zu ändern, bevor es normal angezeigt werden kann |
<<: 17 hervorragende Webdesigns, sorgfältig von Startups entwickelt
Artikel empfehlen
So erzielen Sie mit Vue3 beispielsweise einen Lupeneffekt
Inhaltsverzeichnis Vorwort 1. Die Bedeutung der K...
MySQL 5.7.18 MSI-Installations-Grafik-Tutorial
In diesem Artikel wird das MySQL 5.7.18 MSI-Insta...
Der Unterschied zwischen Animation und Übergang
Der Unterschied zwischen CSS3-Animation und JS-An...
MySQL-Praxiskenntnisse: Analyse von Methoden zum Vergleichen, ob zwei Tabellen unterschiedliche Daten haben
Dieser Artikel beschreibt anhand eines Beispiels,...
Verwenden von js zum Implementieren der bidirektionalen Bindungsfunktion von Daten in Vue2.0
Object.defineProperty verstehen Grammatik: Object...
Spezifische Verwendung von Docker Anonymous Mount und Named Mount
Inhaltsverzeichnis Datenvolumen Anonyme und benan...
Lösung für den Vue3.0-Fehler: Modul „worker_threads“ kann nicht gefunden werden
Ich werde meinen ersten Versuch mit vue3.0 aufzei...
Hyperlink-Tag für HTML-Webseiten
Lernprogramm zum Hyperlink-Tag einer HTML-Webseit...
Zusammenfassung des MySQL Undo Log und Redo Log
Inhaltsverzeichnis Undo-Protokoll Erstellung und ...
Erläuterung zur Verwendung und Änderung des Standard-Programmveröffentlichungspfads von Tomcat
Der standardmäßige Programmveröffentlichungspfad ...
Lernen Sie die wichtigsten Kenntnisse, die im Vue-Framework beherrscht werden müssen
1. Was ist Vue Vue ist ein fortschrittliches Fram...
Eine detaillierte Einführung in die Verwendung von Blockkommentaren in HTML
Allgemeine Kommentare in HTML: <!--XXXXXXXX--&g...
Implementierung der CSS3-Button-Randanimation
Erster Blick auf die Wirkung: html <a href=&qu...
Vermeiden Sie den Missbrauch zum Lesen von Daten in Vue
Inhaltsverzeichnis Vorwort 1. Der Prozess der Ver...
mysql8.0.20 herunterladen und installieren und aufgetretene Probleme (Abbildung und Text)
1. Suchen Sie im Browser nach MySQL, um es herunt...