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
Zusammenfassung der am häufigsten verwendeten Wissenspunkte zu den neuen Funktionen von ES6
Inhaltsverzeichnis 1. Schlüsselwörter 2. Dekonstr...
Installieren Sie das komprimierte MySQL5.7-Paket schnell unter Windows
In diesem Artikel erfahren Sie, wie Sie das kompr...
So fügen Sie einen Docker-Port hinzu und erhalten eine Docker-Datei
Holen Sie sich das Dockerfile aus dem Docker-Imag...
base target="" gibt das Ziel des Basislinks zum Öffnen des Frames an
<base target=_blank> ändert den Zielrahmen d...
Beenden Sie eine Reihe von MySQL-Datenbanken mit nur einem Shell-Skript wie diesem (empfohlen)
Ich wurde am frühen Morgen durch einen Anruf gewe...
Zusammenfassung der HOC-Nutzung von React-High-Order-Komponenten
Ein Satz zur Einführung von HOC Was ist eine Komp...
CentOS7-Netzwerkkonfiguration unter virtueller VMware-Maschine (Host für drahtlosen Internetzugang)
Dies ist das erste Mal, dass ich das CentOS7-Syst...
Analyse von Beispielen für die Verwendung von Anti-Shake und Throttling in Vue-Komponenten
Seien Sie vorsichtig, wenn Sie auf Ereignisse ach...
Analyse der Unterschiede zwischen Iframe und FRAME
1. Verwendung des Iframe-Tags <br />Wenn es ...
Wie man hochwertige Webseiten gestaltet Erfahrung in der Gestaltung hochwertiger Webseiten (Bilder und Text)
Mit der zunehmenden Anzahl offener Plattformen ver...
Lösung für das Problem, dass MySQL Daten sehr langsam löscht und einfügt
Wenn ein Unternehmensentwickler eine Insert-Anwei...
So verwenden Sie das Name-Attribut und das ID-Attribut des A-Tags, um innerhalb der Seite zu springen
Früher wusste ich nur, wie ich zum Springen das Na...
Erste Schritte Tutorial für Anfänger⑧: Einfaches Erstellen einer Artikel-Site
In meinem letzten Beitrag habe ich darüber gesproc...
Detaillierte Erklärung des SELINUX-Arbeitsprinzips
1. Einleitung Der Hauptvorteil, den SELinux für L...
jQuery implementiert die Praxis, die Position und Größe von div durch Ziehen der Maus zu ändern
Um einen Windows Forms ähnlichen Effekt zu erziel...