Heim >Web-Frontend >HTML-Tutorial >So fügen Sie Tabellen dynamisch in HTML hinzu
So fügen Sie Tabellen dynamisch in HTML hinzu
- 墨辰丷Original
- 2018-06-04 14:46:0310606Durchsuche
Zusammenfassung: Das Obige ist der gesamte Inhalt dieses Artikels zum dynamischen Hinzufügen von Tabellen in HTML. Ich hoffe, dass er für das Lernen aller hilfreich sein wird. Verwandte Empfehlungen:
Der spezifische Code lautet wie folgt:
<html>
<head><title>Table</title></head>
<body>
<table border="1">
<thead>
<tr>
<td>First Name</td>
<td>Last Name</td>
<td> </td>
</tr>
<thead>
<tbody id="tb">
<tr id="1st">
<td>张</td>
<td>三</td>
<td><input type="button" value="Add" onclick="add()">
<input type="button" value="Del" onclick="del(this)"></td>
</tr>
</tbody>
</table>
</body>
</html>
<script>
function add() {
var trObj = document.createElement("tr");
trObj.id = new Date().getTime();
trObj.innerHTML = "<td><input name='firstName'/></td><td><input name='lastName'/></td><td><input type='button' value='Add' onclick='add()'> <input type='button' value='Del' onclick='del(this)'></td>";
document.getElementById("tb").appendChild(trObj);
}
function del(obj) {
var trId = obj.parentNode.parentNode.id;
var trObj = document.getElementById(trId);
document.getElementById("tb").removeChild(trObj);
}
</script>Im obigen Code wird zunächst eine Tabelle im Hauptteil erstellt, um nachfolgende Vorgänge zu erleichtern Die Tabellen-Tags, das Tag „ad“ markiert den Tabellenkopf und das Tag „tbody“ markiert den Tabellenkörper.
Die Tabelle im Beispiel hat drei Spalten, die erste Spalte ist der Vorname, die zweite Spalte der Nachname und die dritte Spalte ist die Operationsspalte.
Die Operationsspalte enthält zwei Operationen: Eine besteht darin, Zeilen zur Tabelle hinzuzufügen, und die andere darin, die aktuelle Zeile zu löschen. Die Vorgänge zum Hinzufügen von Zeilen und zum 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 von Zeilen bzw. zum Löschen von Zeilen ausgelöst.
Zeilenmethode hinzufügen
function add() {
var trObj = document.createElement("tr");
trObj.id = new Date().getTime();
trObj.innerHTML = "<td><input name='firstName'/></td><td><input name='lastName'/></td><td><input type='button' value='Add' onclick='add()'> <input type='button' value='Del' onclick='del(this)'></td>";
document.getElementById("tb").appendChild(trObj);
}Erstellen Sie in der ersten Zeile ein tr-Element, also eine Tabellenzeile.
Die zweite Zeile: trObj.id = new Date().getTime(); Fügen Sie das ID-Attribut zur geänderten Zeile hinzu, weisen Sie dem Attribut einen Wert zu und übernehmen Sie die Millisekunden des aktuellen Systems. Dies wird hauptsächlich beim Löschen benötigt.
Die dritte Zeile, trObj.innerHTML = "b6c5a531a458a2e790c1fd6421739d1c61d71f8ced4e1375950b5ac537758443b90dd5946f0946207856a8a37f441edfb6c5a531a458a2e790c1fd6421739d1c9ac1c428fb47dca12ca6f940389d6aa2b90dd5946f0946207856a8a37f441edfb6c5a531a458a2e790c1fd6421739d1c44bc96e11ef0e1a83df891a885fb7405
0a576fdff2dcd4358bbe53d77cead2e0b90dd5946f0946207856a8a37f441edf“; weist der Tabellenzeile einen Wert zu und legt den HTML-Code zwischen dem a34de1251f0d9fe1e645927f19a896e8-Tag und dem faf91434a1f5a592250d334d3c5d1ba3-Tag
Die Rolle von lang im Tag
Erstellen Sie eine Formularinstanz mit Tags inDas obige ist der detaillierte Inhalt vonSo fügen Sie Tabellen dynamisch in HTML hinzu. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!