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
Grundlegende Kenntnisse zur MySQL-Wurmreplikation
Würmer replizieren sich, wie der Name schon sagt,...
Lösung für das Problem, dass die Seite leer ist, wenn die Seite mit der Quelldatei in IE7 geöffnet wird
Frage: Die Kodierung meines Blogs ist UTF-8. Manch...
Beheben von Problemen mit impliziter MySQL-Konvertierung
1. Problembeschreibung root@mysqldb 22:12: [xucl]...
Rsync+crontab regelmäßige Synchronisierungssicherung unter centos7
In letzter Zeit möchte ich regelmäßig wichtige in...
So verwenden Sie Vue+ElementUI Tree
Die Verwendung von Vue + ElementUI Tree dient zu ...
So fügen Sie eindeutige Indizes für Felder in MySQL hinzu und löschen sie
1. PRIMARY KEY hinzufügen (Primärschlüsselindex) ...
Detaillierte Erklärung von JavaScript zur Überwachung von Routenänderungen
Inhaltsverzeichnis Geschichte pushState() Methode...
Ein kurzer Vortrag über JavaScript Sandbox
Vorwort: Apropos Sandboxen: Wir denken vielleicht...
Ein Artikel zum Verständnis des Ausführungsprozesses von MySQL-Abfrageanweisungen
Vorwort Wir müssen bestimmte Daten abrufen, die d...
Zehn Erfahrungen im Webdesign im Jahr 2008
<br />Das Internet verändert sich ständig un...
Tutorial-Diagramm zur Installation von CentOS 7.3 auf einer virtuellen VMware-Maschine
VMware-Vorbereitung CentOS-Vorbereitung, hier ist...
Der Unterschied zwischen HTML-Block-Level-Tags und Inline-Tags
1. Blockebenenelement: bezieht sich auf die Fähigk...
Empfohlene Plugins und Anwendungsbeispiele für Vue-Unit-Tests
Inhaltsverzeichnis rahmen Erstklassiges Fehlerrep...
Verschaffen Sie sich ein umfassendes Verständnis des Prototypobjekts in JavaScript
Inhaltsverzeichnis 1. Was ist ein Prototyp? 1.1 F...
So verwenden Sie Maxwell zum Synchronisieren von MySQL-Daten in Echtzeit
Inhaltsverzeichnis Über Maxwell Konfiguration und...