Javascript y objetos de formulario dinámicos

Tengo una tabla donde cada fila contiene cajas de texto, necesito añadirle de forma dinámica con javascript una nueva fila con nuevas cajas de texto.
2

2 Respuestas

106.550 pts. Trabajo en desarrollo web en general, html, css, etc
Lo que quieres hacer se puede hacer con DOM. Algo como esto:
<html>
<head>
<script>
function dale(){
var tr = document.createElement("tr");
var td = document.createElement("td");
var td2 = document.createElement("td");
var td3 = document.createElement("td");
var td4 = document.createElement("td");
td.appendChild(document.createTextNode("Texto de la celda nueva"));
tr.appendChild(td);
td2.appendChild(document.createTextNode("Texto de la celda nueva 2"));
tr.appendChild(td2);
td3.appendChild(document.createTextNode("Texto de la celda nueva 3"));
tr.appendChild(td3);
td4.appendChild(document.createTextNode("Texto de la celda nueva 4"));
tr.appendChild(td4);
document.getElementById("tabla").lastChild.appendChild(tr);
return true;
}
</script>
</head>
<body>
<input type="button" onClick="return dale()" value="nueva fila"><br>
<table width="100%" id="tabla">
<tr>
<td>1-1
</td>
<td>1-2
</td>
<td>1-3
</td>
<td>1-4
</td>
</tr>
<tr>
<td>2-1
</td>
<td>2-2
</td>
<td>2-3
</td>
<td>2-4
</td>
</tr>
</table>
</body>
</html>
Espero que te sirva de base para lo que quieres hacer. El código creo que es bastante claro como para poder seguir con lo que quieras. Ademas, al ser DOM, es válido para todos los navegadores (probado en explorer, netscape y opera).
41.425 pts.
Lo que se me ocurre es que uses capas, prueba este ejemplo a ver si te sirve:
<html>
<head>
<script>
function addInput() {
document.getElementById('dyn_input').innerHTML = "<input type='text' name='nombre_input'>";
}
</script>
</head>
<body>
<table><tr><td><input type=button onClick='addInput()' value='Crear input'></td></tr>
<tr><td><div id='dyn_input'></div></td></tr>
</table>
</body>
</html>
No sé si es esto exactamente lo que necesitas, ya me contarás.
Saludos,
iNphYx
Gracias por tu respuesta, con tu ayuda y la de otros pude lograr el siguiente código que para mi basta.
<html>
<head>
<script>
function agregarcont_fila(idTabla,arrayContenido){
var tr = document.createElement("tr"); //crear objeto <TR>
for (i=0; i < arrayContenido.length; i++){
var td = document.createElement("td"); //crear objeto <TD>
td.innerHTML = "["+(cont_fila+2)+"]["+(i+1)+"]" +arrayContenido; //agregamos HTML al interior de <TD>
tr.appendChild(td);
}
obj1 = document.getElementById(idTabla);
obj1.lastChild.appendChild(tr);
}
cont_fila=0;
function agregarFila(){
idtabla="tabla";
contenido = new Array();
contenido[contenido.length] = "";
contenido[contenido.length] = "<input type='text' name='nombre_input["+cont_fila+"]["+contenido.length+"]'>";
contenido[contenido.length] = "<input type='text' name='nombre_input["+cont_fila+"]["+contenido.length+"]'>";
contenido[contenido.length] = "";
agregarcont_fila(idtabla,contenido);
cont_fila++;
}
</script>
</head>
<body>
<input type="button" name="botonx1" value="crear fila" onClick="agregarFila();">
<br>
<table width="100%" border="1" id="tabla">
<tr>
<td>[1][1] </td>
<td>[1][2] </td>
<td>[1][3] </td>
<td>[1]-[4] </td>
</tr>
<tr>
<td>[2][1]</td>
<td>[2][2] </td>
<td> [2]-[3] </td>
<td>[2]-[4] </td>
</tr>
</table>
<p>  </p>
<br>
</body>
</html>
Gracias a vos y el resto de las personas que de una u otra manera logran que Internet sea una verdadera comunidad.

Añade tu respuesta

Haz clic para o

Más respuestas relacionadas