Ich sage nicht viel Unsinn, ich werde die Code direkt posten.
<html> <kopf> <titels> Tabelle </title> </head> <body> <Table Border = 1> <thead> <td> Vorname </td> Nachname </td> <td> </ td> </tr> <thead> <tbody id = tb> <l id = 1st> </td> <td> Drei </td> <td> <Eingabe type = button -value = addoNCLICK = add ()> <Eingabe type = Taste Wert = del onclick = del (this) .Createelement (tr); > </td> <td> <Eingabe type = 'button' value = 'add' onclick = 'add ()'> <Eingabe type = 'button' value = 'del' onclick = 'del (this)'> < /td>; . Removechild (trObj);} </script>
Im obigen Code wird zuerst eine Tabelle im Körper konstruiert.
Im Beispiel gibt es drei Spalten, die erste Spalte des Vornamens, den Nachnamen der zweiten Spalte und die dritte Spalte als Operationsspalte.
Die Operationsspalte enthält zwei Vorgänge, eine zum Hinzufügen einer Zeile zum Formular und die andere ist, die aktuelle Linie zu löschen. Die Operationen der Additions- und Löschleitungen sind an zwei Schaltflächen gebunden, und wenn die Schaltfläche klickt, wird die entsprechende ADD-/ Löschen -Zeilenoperation ausgelöst.
Additionsmethode Funktion add () {var trobj = document.createelement (tr); <Eingabename = 'LastName'/> </td> <td> <Eingabe type = 'button' value = 'add' onclick = 'add ()'> <Eingabe type = 'value =' del 'onclick =' del (this) '> </td>;Die erste Zeile besteht darin, ein TR -Element zu erstellen, das heißt, eine Tabellenzeile zu erstellen.
In der zweiten Zeile werden die Millisekunden des aktuellen Systems vorliegen, wenn trObj.id = new Date().getTime(); das Attribut für die Änderung addieren und das Attribut zuweisen.
Dritte Zeile, 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> ; Durch das Innerhtmml -Attribut.
Die vierte Zeile, document.getElementById(tb).appendChild(trObj);
Funktion del (obj) {var trum = obj.parentnode.parentnode.id;Ein Parameter wird in der Deletion -Methode vermittelt. wo sich das befindet.
In der ersten Zeile erhalten Sie var trId = obj.parentNode.parentNode.id ;
In der zweiten Zeile erhalten Sie var trObj = document.getElementById(trId);
In der dritten Zeile document.getElementById(tb).removeChild(trObj); .
Der obige Code realisiert im Grunde die Funktion der dynamischen Zählung und Löschung, aber es gibt Fehler im Code.
1 Tabelle 1 vor und nach der Erhöhung ändert sich die Breite der Tabelle
Zunahme
Zunahme
Nach der Erhöhung wird die Form der Form breiter
2 Die Standardseite des Browsers auf Chinesisch erscheint auf Chinesisch verstümmelt
Sie müssen die Zeichenkodierung festlegen, um das Seitungs -Codierungsformat zu ändern, bevor es normal angezeigt werden kann