Foros del Web » Programando para Internet » Javascript »

filas dinamicas

Estas en el tema de filas dinamicas en el foro de Javascript en Foros del Web. Buenos dias a todos: Mi consulta es la siguiente: Tengo una tabla con esta estructura: <DIV id="comp"> <TABLE id = "t2" BORDER="2" WIDTH="90%" CELLPADDING="5" CELLSPACING="5" ...
  #1 (permalink)  
Antiguo 31/05/2004, 03:41
 
Fecha de Ingreso: mayo-2004
Mensajes: 29
Antigüedad: 20 años, 6 meses
Puntos: 0
filas dinamicas

Buenos dias a todos:
Mi consulta es la siguiente:

Tengo una tabla con esta estructura:
<DIV id="comp">
<TABLE id = "t2" BORDER="2" WIDTH="90%" CELLPADDING="5" CELLSPACING="5" bordercolor="#FFcc33">

<TR>
<TD><INPUT TYPE="text" VALUE="" NAME="CompCurso1"></TD>
<TD><INPUT TYPE="text" VALUE="" NAME="CompCentro1" ></TD>
<TD><INPUT TYPE="text" VALUE="" NAME="CompHoras1" ></TD>
<TD><INPUT TYPE="text" VALUE="" NAME="CompObservac1"></TD>
<td><input type="button" name="compb" value="Añadir Curso" onClick="Complementaria();"></td>

</TR>
</TABLE>


La funcion asociada al boton lo que me va a hacer es añadir una nueva fila:

function Complementaria()
{

var t2=document.getElementById('comp').innerHTML;
t2=t2.substring(0,(t2.length-7));
t2+="<tr><td><input type = text name = CompCurso"+l+" ></td>
<td><input type = text name = CompCentro"+l+" ></td>
<td><input type = text name = CompHoras"+l+" 4></td>
<td><input type = text name = CompObservac"+l+"></td>
</tr>
</table>";
document.getElementById('comp').innerHTML=t2;
l++;
}

Vale me inserta una nueva fila, pero me desaparece el texto que he incluido en la primera fila
Gracias
  #2 (permalink)  
Antiguo 31/05/2004, 04:34
 
Fecha de Ingreso: mayo-2004
Mensajes: 75
Antigüedad: 20 años, 6 meses
Puntos: 2
Creo que esto es lo que quieres ¿no?

<html>
<head>
<script language="JavaScript">
var l=2;

function complementaria2(){
alert("complementaria2");
var objTabla = document.getElementById("t2");
var objTbody=objTabla.firstChild;
var objNuevaFila=objTbody.childNodes[0].cloneNode(true);
//cambiamos el contenido de las celdas
objNuevaFila.childNodes[0].innerHTML = "<input type =\"text\" name =\"CompCurso"+l+"\" >";
objNuevaFila.childNodes[1].innerHTML = "<input type =\"text\" name =\"CompCentro"+l+"\" >";
objNuevaFila.childNodes[2].innerHTML = "<input type =\"text\" name =\"CompHoras"+l+"\" >";
objNuevaFila.childNodes[3].innerHTML = "<input type =\"text\" name =\"CompObservac"+l+"\" >";
objTbody.appendChild(objNuevaFila);
l++;
}
</script>
</head>
<body>
<DIV id="comp">
<TABLE id = "t2" BORDER="2" WIDTH="90%" CELLPADDING="5" CELLSPACING="5" bordercolor="#FFcc33">

<TR>
<TD><INPUT TYPE="text" VALUE="" NAME="CompCurso1"></TD>
<TD><INPUT TYPE="text" VALUE="" NAME="CompCentro1" ></TD>
<TD><INPUT TYPE="text" VALUE="" NAME="CompHoras1" ></TD>
<TD><INPUT TYPE="text" VALUE="" NAME="CompObservac1"></TD>
<td><input type="button" name="compb" value="Añadir Curso" onClick="complementaria2();"></td>

</TR>
</TABLE>
</body>
</html>
  #3 (permalink)  
Antiguo 31/05/2004, 06:00
 
Fecha de Ingreso: mayo-2004
Mensajes: 29
Antigüedad: 20 años, 6 meses
Puntos: 0
Muchas gracias Sonia - Me estas sacando de un aprieto muy grande.No conocia yo nada acerca de nodos y todo eso.
2 preguntas mas:

-¿Como se podria eliminar el boton de cada fila, es decir ir desplanzadolo a medida de que nos vayamos creando una fila?
- ¿Como puede pasar al formulario el numero total de filas que se han insertado finalmente en la tabla ? Habia pensado utilizar un hidden, pasandole el contador, pero no puede acceder a esa variable.

Muchas Gracias
  #4 (permalink)  
Antiguo 31/05/2004, 06:40
 
Fecha de Ingreso: mayo-2004
Mensajes: 75
Antigüedad: 20 años, 6 meses
Puntos: 2
Te he modificado el metodo de antes de forma que quita el boton de la fila anterior, eso si, la fila se queda con un cuadro vacio que no se si es lo que querias. Sino lo que puedes hacer es poner el boton fuera de la tabla (quitas esa cuarta columna y todo el javascript que hace referencia a ella), de manera que el boton aparece justo debajo de la tabla y se va desplazando hacia abajo segun va creciendo la tabla.

En cuanto a lo de pasarle al formulario el numero de filas que tiene la tabla al final, no entiendo muy bien lo que quieres decir con "Habia pensado utilizar un hidden, pasandole el contador, pero no puede acceder a esa variable." ¿no puedes acceder a la variable?. Lo del hidden me parece la opcion menos liante. He metido la tabla dentro de un formulario (porque supongo que los datos de la tabla tambien tienen que ir en el formulario) y he puesto un hidden "numFilas" que actualizo cada vez que añado una nueva fila a la tabla. Por si quieres ver como se va modificando el contenido de esta variable el enlace mostrar numero filas te lo enseña en un alert.

<html>
<head>
<script language="JavaScript">
var l=2;

function complementaria2(){
var objTabla = document.getElementById("t2");
var objTbody=objTabla.firstChild;
var objNuevaFila=objTbody.childNodes[0].cloneNode(true);
//cambiamos el contenido de las celdas
objNuevaFila.childNodes[0].innerHTML = "<input type =\"text\" name =\"CompCurso"+l+"\" >";
objNuevaFila.childNodes[1].innerHTML = "<input type =\"text\" name =\"CompCentro"+l+"\" >";
objNuevaFila.childNodes[2].innerHTML = "<input type =\"text\" name =\"CompHoras"+l+"\" >";
objNuevaFila.childNodes[3].innerHTML = "<input type =\"text\" name =\"CompObservac"+l+"\" >";
objNuevaFila.childNodes[4].innerHTML = "<input type=\"button\" name=\"compb\" value=\"Añadir Curso\" onClick=\"complementaria2();\">";
objTbody.appendChild(objNuevaFila);
//l es el contador de las filas de la tabla, hago -2 porque yo lo tengo inicializado a 2
//y la primera fila es la 0
objTbody.childNodes[l-2].childNodes[4].innerHTML = "&nbsp;";
//actualizamos la variable del formulario que indica el numero de filas
document.getElementById("numFilas").value = l;
//incrementamos para la siguiente fila
l++;
}
</script>
</head>
<body>
<DIV id="comp">
<FORM name="formulario">
<INPUT type="hidden" name="numFilas" value="1"/>
<TABLE id = "t2" BORDER="2" WIDTH="90%" CELLPADDING="5" CELLSPACING="5" bordercolor="#FFcc33">
<TR>
<TD><INPUT TYPE="text" VALUE="" NAME="CompCurso1"></TD>
<TD><INPUT TYPE="text" VALUE="" NAME="CompCentro1" ></TD>
<TD><INPUT TYPE="text" VALUE="" NAME="CompHoras1" ></TD>
<TD><INPUT TYPE="text" VALUE="" NAME="CompObservac1"></TD>
<td><input type="button" name="compb" value="Añadir Curso" onClick="complementaria2();"></td>
</TR>
</TABLE>
<TABLE>
<TR>
<TD>
<a href="javaScript: alert(document.getElementById('numFilas').value)"> mostrar numero filas</a>
</TD>
</TR>
</TABLE>
</FORM>
</DIV>
</body>
</html>

Espero haberme explicado bien y que te sirva.
  #5 (permalink)  
Antiguo 01/06/2004, 03:02
 
Fecha de Ingreso: mayo-2004
Mensajes: 29
Antigüedad: 20 años, 6 meses
Puntos: 0
Muchas Gracias

La verdad segun he visto en el ejemplo y lo que he probado, desaparece el primer boton de la primera fila, pero luego al ir haciendo llamadas recursivas no llega a desparecer.
De todas maneras muchisimas gracias por todo
  #6 (permalink)  
Antiguo 01/06/2004, 07:12
 
Fecha de Ingreso: mayo-2004
Mensajes: 75
Antigüedad: 20 años, 6 meses
Puntos: 2
yo lo he probado añadiendo como 30 filas o asi y siempre me ha quitado el boton de la anteultima fila y ha dejado solo el de la ultima fila ¿seguro que no tocas el contador l en ningun otro punto de tu codigo JavaScript por el que pases?.

De todas formas encantada de haberte podido ayudar.
  #7 (permalink)  
Antiguo 01/06/2004, 07:36
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años, 7 meses
Puntos: 1284
Hola a todos:

Hace algún tiempo preparé esta página para contestar algún tema: http://www.pepemolina.com/tablas

El código se puede ver en la misma página... Me parece que hubo colaboración de JavierB (¡Hola !)

Espero que te sirva.

Saludos
  #8 (permalink)  
Antiguo 02/06/2004, 08:57
 
Fecha de Ingreso: mayo-2004
Mensajes: 29
Antigüedad: 20 años, 6 meses
Puntos: 0
otra vez yo

De verdad SoniaGrande que he copiado y pegado el codigo y solo se realiza correctamente para la primera fila.

De todas maneras formulo esta pregunta:
Dado este codigo que permite crear una celda con una select:

objNuevaFila.childNodes[0].innerHTML = "<SELECT NAME = \"AntActividad"+i+"\" SIZE=1></SELECT>";

Puedo incluir aqui codigo php como este que sea el que conectandose a la base de Datos me forme las distintas opciones de la SELECT.

<?php
// Consulta de los distintos actuaciones que existen

$consulta="select * from Otras_Actuaciones order by Id_Actividad";
$resultado=mysql_query($consulta,$link);


if($resultado){

while ($fila = mysql_fetch_array($resultado)){
if ($fila["Tipo"]!=""){
echo("<OPTION VALUE=".$fila["Tipo"].">".$fila["Tipo"]."</OPTION>");
}
}

}

Gracias por todo
  #9 (permalink)  
Antiguo 07/10/2008, 09:38
Avatar de glmarzoa  
Fecha de Ingreso: octubre-2008
Mensajes: 7
Antigüedad: 16 años, 1 mes
Puntos: 0
Respuesta: filas dinamicas

Tu código me ha sido super super útil, muchísimas gracias... Yo es que soy algo novata en esto. El problema es que el código no me funciona en FireFox, y no se porque... Alguna idea???

Gracias otra vez


Cita:
Iniciado por soniagrande Ver Mensaje
Creo que esto es lo que quieres ¿no?

<html>
<head>
<script language="JavaScript">
var l=2;

function complementaria2(){
alert("complementaria2");
var objTabla = document.getElementById("t2");
var objTbody=objTabla.firstChild;
var objNuevaFila=objTbody.childNodes[0].cloneNode(true);
//cambiamos el contenido de las celdas
objNuevaFila.childNodes[0].innerHTML = "<input type =\"text\" name =\"CompCurso"+l+"\" >";
objNuevaFila.childNodes[1].innerHTML = "<input type =\"text\" name =\"CompCentro"+l+"\" >";
objNuevaFila.childNodes[2].innerHTML = "<input type =\"text\" name =\"CompHoras"+l+"\" >";
objNuevaFila.childNodes[3].innerHTML = "<input type =\"text\" name =\"CompObservac"+l+"\" >";
objTbody.appendChild(objNuevaFila);
l++;
}
</script>
</head>
<body>
<DIV id="comp">
<TABLE id = "t2" BORDER="2" WIDTH="90%" CELLPADDING="5" CELLSPACING="5" bordercolor="#FFcc33">

<TR>
<TD><INPUT TYPE="text" VALUE="" NAME="CompCurso1"></TD>
<TD><INPUT TYPE="text" VALUE="" NAME="CompCentro1" ></TD>
<TD><INPUT TYPE="text" VALUE="" NAME="CompHoras1" ></TD>
<TD><INPUT TYPE="text" VALUE="" NAME="CompObservac1"></TD>
<td><input type="button" name="compb" value="Añadir Curso" onClick="complementaria2();"></td>

</TR>
</TABLE>
</body>
</html>
  #10 (permalink)  
Antiguo 07/10/2008, 09:54
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 22 años, 9 meses
Puntos: 772
Respuesta: filas dinamicas

El mensaje original es de hace más de 4 años. Por favor, no reviváis temas tan antiguos.

Saludos,
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Tema Cerrado




La zona horaria es GMT -6. Ahora son las 18:47.