No digo muchas tonterías, publicaré el código directamente.
<html> <cead> <title> table </title> </head> <body> <table border = 1> <thead> <td> nombre de primer </td> apellido </td> <td> </<// td> </tr> <thead> <tbody id = tb> <l id = 1st> </td> <td> tres </td> <td> <input type = 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> <input type = 'button' value = 'add' onClick = 'add ()'> <input type = 'button' value = 'del' onClick = 'del (this)'> < /td>; .En el código anterior, una tabla se construye primero en el cuerpo.
Hay tres columnas en el ejemplo, la primera columna de primer nombre, el apellido de la segunda columna y la tercera columna como la columna de operación.
La columna de operación contiene dos operaciones, una es agregar una línea al formulario y la otra es eliminar la línea actual. Las operaciones de las líneas de adición y deleción están atadas a dos botones, y cuando se hace clic en el botón, se activa la operación de fila de adición/ eliminación correspondiente.
Método para agregar Function add () {var Trobj = document.createElement (tr); <input name = 'lastName'/> </td> <td> <input type = 'button' value = 'add' onClick = 'add ()'> <input type = 'value =' del 'onClick =' deld (this) '> </td>;La primera línea es crear un elemento TR, es decir, crear una línea de tabla.
En la segunda línea, trObj.id = new Date().getTime();
Tercera línea, 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> ; A través del atributo InnerHTMML.
La cuarta línea, document.getElementById(tb).appendChild(trObj);
Función del (obj) {var trum = obj.parentnode.parentnode.id;Se transmite un parámetro en el método de eliminación. donde se encuentra esto.
En la primera línea, var trId = obj.parentNode.parentNode.id ;
En la segunda línea, var trObj = document.getElementById(trId);
En la tercera línea, document.getElementById(tb).removeChild(trObj);
El código anterior básicamente se da cuenta de la función del aumento de medidor dinámico y las líneas de eliminación, pero hay fallas en el código.
1 Tabla 1 antes y después del aumento, el ancho de la tabla cambia
Aumentar
Aumentar
Después del aumento, la forma de la forma se ensancha
2 La página predeterminada del navegador en chino aparece confusión en chino
Debe establecer la codificación de caracteres para modificar el formato de codificación de la página antes de que pueda mostrarse normalmente