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 respuestas

Respuesta
1
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).
Respuesta
1
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

¿Cómo puedo bloquear URL saliente del servidor apache?

Tengo varias paginas en el servidor con distintos usuarios, y quiero bloquear vinculos salientes del servidor, digamos que ninguna pagina o escripto podra vincular a http://midominiobloqueado.com desde el servidor. Uso linux apache2. ¿Se te ocurre...
2 respuestas

Insertar google maps en flash

Quisiera me ayudaras a insertar un mapa de "google maps" en mi web flash, de preferencia en AS 2.0 ya tengo el componente GMap, pero no tengo ni idea de como hacerlo funcionar.
1 respuesta

Creación y edición de tablas con JS

Estoy intentando hacer algo complejo pero que necesito. Explicado de una manera sencilla, supone partir de un html con una serie de tablas ya creadas y, a partir de ahí, poder crear tablas nuevas o poder editar las tablas ya existentes, todo éso...
2 respuestas

Ajustar swf a ventana

Buena zador Me gustaria saber como hacer para que una pelicula de 1440x900 se ajuste a todas las ventanas y navegadores, probe cambiando unos parametros para publicar desde el flash pero en cuanto lo hago mi swf deja de funciona no me carga ni la...
1 respuesta

Suma aleatoria de array

Disculpe una pregunta como le puede hacer para que el array para sumar que me construyo me sume valores aleatoriamenta por ejemplo si meto valores de la posición 0 a la 6 y de la 7 a la 10 dejo en blanco y después en la posición 11 meto otro valor se...
1 respuesta

Obtener texto de un td

Necesito obtener el texto que tiene un td y mostrarlo en un alert, tengo el siguiente código php : <title>Documento sin título</title> <script language="javascript" type="text/javascript"> function volcar_valores(e){ tr =...
2 respuestas

¿Como insertar un script correctamente?

Quisiera saber como inserto un script o javascript en mi web llevo algun timpo intentando poner scripts en mi web y al momento de ponerlos no sale nada me podrias decir donde se ponen y si llevan otra cosa extra para que funcionen
1 respuesta

Error en la resta de un array

Días o noches amigo carlito me da mucho gusto verlo de regreso bueno tengo una función que se supone debe de restar 3 valores y lo único que hace es cambiar el signo y suma los valores quisiera saber donde esta mi error saludos y gracias function...
1 respuesta

Switch Case en Java Script

Espero que se encuentre muy bien saludos El motivo por el cual le escribo es porque tengo una función que suma totales, el problema que tengo es que si por ejemplo solo quiero sumar los totales que capture en por text y no en todos no me lo hace, la...
2 respuestas

Mostrar imagen grande en galeria de imagenes

He creado una galeria de imgenes y quiero que al pinchar en la foto esta se haga ms grande. Pero no consigo mostrar la foto en grande te paso el código a ver si me puedes "echar una mano". Gracias <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0...
1 respuesta