¡buenas!
el primer detalle que salta a la vista es que repites el ID en varios elementos. por norma, el ID no se puede repetir. y cuando lo haces, getElementById solo encuentra uno. hay varias formas que puedes optar para lograr el mismo resultado:
- seleccionar elementos por clases (getElementsByClassName) y luego manipular el estilo. la selección por clase te devuelve un grupo de elementos.
- agrupar los campos extras en distintos elementos. por ejemplo, una tabla puede tener más de un cuerpo (TBODY). en tu caso tendrías dos cuerpos, el primero es visible y el segundo se mantiene oculto. cuando el usuario lo requiera, muestras el segundo cuerpo modificando los estilos.
- crear filas a petición del usuario. el concepto es bien distinto. no es lo mismo crear que mostrar algo oculto. la ventaja de crear las filas es que el usuario puede solicitar una cantidad variable de filas según las que necesite. en cambio, cuando tu muestras algo oculto seguramente ya habrá una cantidad definida por tí. básicamente consiste en clonar el DOM de un elemento o recrear todos los elementos que componen una fila.
hay otras formas adicionales pero no tan cómodas, ya sea por discrepancia del navegador (modificar la hoja de estilo a través del DOM) o porque tiene efectos secundarios no deseados (innerHTML, código html que puedes manipular en forma de string). en fin, es cuestión que decidas cuál método usar. de momento explico más o menos como son los últimos dos métodos de la lista: el segundo porque es el más fácil de implementar y el tercero por su habilidad de dar el control al usuario de determinar cuantas filas crear.
TBODY
Código:
<table>
<tbody><!-- filas visibles --></tbody>
<tbody id="..." style="..."><!-- filas ocultas --></tbody>
</table>
nótese el esquema del código html. simplemente tomas el elemento TBODY por su ID (getElementById) y modificas la propiedad
display de
style.
clonar filas
es un poquito más complicado porque requiere cierta atención. por ejemplo, tu puedes crear todos los elementos de forma individual (createElement) pero resulta poco práctico dado la cantidad de código a escribir (mucho createElement, createTextNode y appendChild). por tanto, lo más fácil es clonar un elemento ya existente y modificar ciertos datos si fuera necesario: nombre de los campos, algún texto, valor de los campos, etc. básicamente consiste en tomar la referencia de una fila (getElementById o table.rows), invocar el método cloneNode y agregar a la tabla con appendChild.
Código:
<table id="..."><!-- una o varias filas a mostrar --></table>
// en la función asociada al botón que pulsa el usuario;
var table = document.getElementById(...).firstChild;
var clone = table.rows[0].cloneNode(true);
table.appendChild(clone);
si quieres manipular los campos y/o elementos del clon, debes manejarte por medio del DOM. te recomiendo que leas acerca de HTML DOM para que te familiarices con los conceptos básicos. no lo he leido pero confío que sea útil,
kusor.net.
