Foros del Web » Programando para Internet » Jquery »

problema con append jquery

 Estas en el tema de problema con append jquery en el foro de Jquery en Foros del Web. Hola amigos Resulta que estoy creando filas en una tabla mediante el append de jquery me resulta todo bien pero me agrega dos filas desde ...
  #1 (permalink)  
Antiguo 11/11/2010, 15:06
 
Fecha de Ingreso: febrero-2010
Ubicación: Santiago
Mensajes: 82
Antigüedad: 14 años, 9 meses
Puntos: 0
Pregunta problema con append jquery
Hola amigos
Resulta que estoy creando filas en una tabla mediante el append de jquery
me resulta todo bien pero me agrega dos filas
desde aca saque el ejemplo

http://hector2c.wordpress.com/2009/0...-en-una-tabla/

en ese link al agregar filas lo hacen con un submit yo lo hice con un button de la siguiente manera

Cita:
var num = 0;
$("#agrega").click(fn_agregar)
function fn_agregar(){
num++;
if ($("#nrecorridos").val()=='')
{
alert("");
$("#nrecorridos").focus();
}
else
{


cadena = "<tr>";
cadena = cadena + "<td>" + num + "</td>";
cadena = cadena + "<td>" + $("#id").val() + "</td>";
cadena = cadena + "<td>" + $("#salida").val() + "</td>";
cadena = cadena + "<td>" + $("#entrada").val() + "</td>";
cadena = cadena + "<td>" + $("#tiempo").val() + "</td>";
cadena = cadena + "<td>" + $("#control").val() + "</td>";
cadena = cadena + "<td>" + $("#fecha").val() + "</td>";
cadena = cadena + "<td>" + $("#observaciones").val() + "</td>";
cadena = cadena + "<td><a class='elimina'><img src='imagenes/delete.png' /></a></td>";
$("#tabla tbody").append(cadena);

fn_dar_eliminar();
alert("Recorrido Agregado"+ num);
}
};
  #2 (permalink)  
Antiguo 11/11/2010, 17:36
Avatar de chicohot20  
Fecha de Ingreso: mayo-2009
Mensajes: 388
Antigüedad: 15 años, 5 meses
Puntos: 43
Respuesta: problema con append jquery
Tal vez tengas dos tbody Podemos ver tu html o php?
  #3 (permalink)  
Antiguo 11/11/2010, 17:56
 
Fecha de Ingreso: diciembre-2009
Ubicación: Misiones
Mensajes: 867
Antigüedad: 14 años, 11 meses
Puntos: 65
Respuesta: problema con append jquery
pone un alert antes del append para ver si se ejecuta 2 veces la función


aunque no tenga nada que ver, esto
cadena = cadena + "<td>...
lo podes hacer
cadena += "<td>...
y te olvidas de cerrar el tr, aunque igual se cierra solo

o como dice chicohot, mosta tu html
  #4 (permalink)  
Antiguo 12/11/2010, 07:46
 
Fecha de Ingreso: febrero-2010
Ubicación: Santiago
Mensajes: 82
Antigüedad: 14 años, 9 meses
Puntos: 0
Respuesta: problema con append jquery
gracias por sus respuestas aplique los dos consejos que me dieron
el primero de chicohot me arroja solo un alert y el otro de Dany sigue funcionando todo bien pero me sigue incluyendo dos filas gracias
aqui esta mi html

Cita:
<div id="controles">
<table width="1024" border="1" cellpadding="0" cellspacing="0" id="tabla" align="center" style="border-collapse:collapse">
<tr>
<th width="7%">N&ordm;</th>
<th align="center" width="10%">ID</th>
<th width="11%" align="center">SALIDA</th>
<th width="14%" align="center">ENTRADA</th>
<th width="12%" align="center">TIEMPO</th>
<th width="12%" align="center">CONTROL</th>
<th width="12%" align="center">FECHA</th>
<th width="17%" align="center" >OBSERVACIONES</th>
<th width="5%">agrega</th>
</tr>

<tr>
<td align="center" height="25"></td>
<td align="center"><input type="text" name="id" id="idvalue="" size="6" maxlength="6" autocomplete="off" /></td>
<td align="center"><input type="text" name="salida" id="salida" value="" size="6" maxlength="6" autocomplete="off" /></td>
<td align="center"><input type="text" name="entrada" id="entrada" value="" size="6" maxlength="6" autocomplete="off" /></td>
<td align="center"><input type="text" name="tiempo" id="tiempo" value="" readonly="readonly" size="6" maxlength="6" autocomplete="off" /></td>
<td align="center"><input type="text" name="control" id="control" size="6" maxlength="6" autocomplete="off" /></td>
<td align="center"><input type="text" name="fecha" id="fecha" size="6" maxlength="6" autocomplete="off" /></td>
<td align="center"><input type="text" name="observaciones" id="observaciones" value="" /></td>
<td align="center"><input type="button" name="agrega" id="agrega" value="agrega" /></td>
</tr>
<tbody>
</tbody>
</table>
</div>
  #5 (permalink)  
Antiguo 12/11/2010, 09:47
 
Fecha de Ingreso: febrero-2010
Ubicación: Santiago
Mensajes: 82
Antigüedad: 14 años, 9 meses
Puntos: 0
Respuesta: problema con append jquery
Gracias por su ayuda ya encontre el problema en el html no habia puesto los thead
gracias
  #6 (permalink)  
Antiguo 12/11/2010, 09:50
 
Fecha de Ingreso: diciembre-2009
Ubicación: Misiones
Mensajes: 867
Antigüedad: 14 años, 11 meses
Puntos: 65
Respuesta: problema con append jquery
efectivamente como dijo chichohot, tenes 2 tbody, aunque no lo veas en tu código

en el código tenes solo 1
Código HTML: 
Ver original

pero tenes un tr suelto, ahi se genera un tbody

entonces te queda 2 tbody, fijate en el firebug la estructura y vas a entender


arregle tu tabla te debe quedar algo asi

Código HTML: 
Ver original
  1. <html>
  2.     <head>
  3.         <title>Ejemplo</title>
  4.         <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  5.     </head>
  6.         <script type="text/javascript">
  7.         $( function (){
  8.             var num = 0;
  9.             $("#agrega").click(fn_agregar)
  10.             function fn_agregar(){
  11.                 num++;
  12.  
  13.                 cadena = "<tr>";
  14.                 cadena += "<td>" + num + "</td>";
  15.  
  16.                 $("#tabla tbody").append(cadena);
  17.  
  18.                 alert("Recorrido Agregado"+ num);
  19.             };
  20.         });
  21.  
  22.         </script>
  23.     <style>
  24.     </style>
  25.     <body>
  26.  <div id="controles">
  27.     <table width="1024" border="1" cellpadding="0" cellspacing="0" id="tabla" align="center" style="border-collapse:collapse">
  28.         <thead>
  29.             <tr>
  30.                 <th align="center" width="10%">ID</th>
  31.                 <th width="5%">agrega</th>
  32.             </tr>
  33.         </thead>
  34.  
  35.         <tbody>
  36.         <tr>
  37.             <td align="center"></td>
  38.             <td align="center"><input type="button" name="agrega" id="agrega" value="agrega" /></td>
  39.         </tr>
  40.         </tbody>
  41.     </table>
  42. </div>
  43. </html>
  #7 (permalink)  
Antiguo 12/11/2010, 09:51
 
Fecha de Ingreso: diciembre-2009
Ubicación: Misiones
Mensajes: 867
Antigüedad: 14 años, 11 meses
Puntos: 65
Respuesta: problema con append jquery
Cita:
Iniciado por jebus3 Ver Mensaje
Gracias por su ayuda ya encontre el problema en el html no habia puesto los thead
gracias
eso, por eso el tr suelto se encierra en un tbody y suma 2 tbody

Etiquetas: append
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.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 17:25.