Je ne dis pas beaucoup de bêtises, je publierai directement le code.
<Html> <A-Head> <Title> Table </ Title> </ Head> <Body> <Table Border = 1> <Thead> <Td> Prénom </td> Nom de famille </td> <Td> </ td> </tr> <thead> <tbody id = tb> <l id = 1st> </td> <td> trois </td> <td> <Type d'entrée = Button Value = Add OnClick = Add ()>> <input type = Button Value = del onclick = del (this)> </td> </tbody> </ body> </html> </html> </html> Script> function add () {var trobj = document .CreateElement (tr); > </td> <td> <Type d'entrée = 'Button' value = 'add' onclick = 'add ()'> <input type = 'Button' value = 'del' onclick = 'del (this)'> < / td>; .Dans le code ci-dessus, une table est d'abord construite dans le corps.
Il y a trois colonnes dans l'exemple, la première colonne du prénom, le nom de famille de la deuxième colonne et la troisième colonne comme colonne d'opération.
La colonne d'opération contient deux opérations, l'une consiste à ajouter une ligne au formulaire et l'autre est de supprimer la ligne actuelle. Les opérations des lignes d'addition et de suppression sont liées à deux boutons, et lorsque le bouton est cliqué, l'opération Add / Supprimer la ligne correspondante est déclenchée.
Méthode d'ajout Fonction Add () {var trobj = document.CreateElement (tr); <input name = 'lastname' /> </td> <td> <entrée type = 'bouton' value = 'add' onclick = 'add ()'> <input type = 'value =' del 'onclick =' del (this) '> </ td>;La première ligne consiste à créer un élément TR, c'est-à-dire pour créer une ligne de table.
Dans la deuxième ligne, trObj.id = new Date().getTime();
Troisième ligne, 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> ; via l'attribut innerhtmml.
La quatrième ligne, document.getElementById(tb).appendChild(trObj); Ajouter la ligne de formulaire créée au sujet du tableau.
Fonction del (obj) {var trum = obj.parentNode.parentNode.id;Un paramètre est transmis dans la méthode de suppression. où cela se trouve.
Dans la première ligne, var trId = obj.parentNode.parentNode.id ; obtenez l'ID du nœud parent du nœud parent de l'élément actuel, c'est-à-dire l'ID de la ligne à supprimer.
Dans la deuxième ligne, var trObj = document.getElementById(trId); obtenez l'élément de lignes à supprimer.
Dans la troisième ligne, document.getElementById(tb).removeChild(trObj); supprime la ligne dans le sujet du tableau.
Le code ci-dessus réalise essentiellement la fonction des lignes de compteur dynamiques et de suppression, mais il y a des défauts dans le code.
1 Tableau 1 Avant et après l'augmentation, la largeur du tableau change
Augmenter
Augmenter
Après l'augmentation, la forme de la forme devient plus large
2 La page par défaut du navigateur en chinois semble brouillé en chinois
Vous devez définir le codage des caractères pour modifier le format d'encodage de la page avant qu'il ne puisse être affiché normalement