¿hasta donde podre llegar?

hector2c, mi bitacora

jQuery – agregar y eliminar filas en una tabla

with 44 comments

HAY UNA NUEVA VERSIÓN REFERENTE A ESTE POST, POR FAVOR VISITA:

http://hector2c.wordpress.com/2010/02/11/jquery-gestionar-una-tabla-con-ajax/

pues pues pues, se me dio por hacer este tutorial gracias a este post:

¿que contiene la aplicación?

  • agregación de nueva fila por medio de un formulario a la tabla
  • eliminación de una fila obteniendo su id para modificar la base de datos por ajax
  • validación de campos de texto enteros, texto y formato e-mail con jquery.validate
  • actualización de bases de datos con ajax
  • formato de aplicacion usando css

¿que olvide añadir?

  • la opción de editar fila, por ejemplo un enlace en la fila y al hacerle click obtener sus datos y modificarlos. no tengan problema en un futuro tutorial hare un ejemplo similar a este.

imagen de la aplicación

1

descarga

puedes descargar la aplicacion desde el siguiente enlace.

box-netcualquier duda bienvenida sea.

HAY UNA NUEVA VERSIÓN REFERENTE A ESTE POST, POR FAVOR VISITA

http://hector2c.wordpress.com/2010/02/11/jquery-gestionar-una-tabla-con-ajax/

About these ads

Written by hector2c

julio 13, 2009 a 5:19 pm

Publicado en jquery, tutorial

44 comentarios

Suscríbete a los comentarios mediante RSS.

  1. Excelente aporte amigo!
    Es exactamente lo que necesitaba, pero mejor que como lo había pensado :D

    saludos desde Fúnes, Argentina!

    Esteban López Adriano

    agosto 5, 2009 at 7:06 pm

    • Hola Hector, la verdad te pasaste exelente trabajo es bueno el material. Gracias….

      Mario Arroyo

      junio 2, 2011 at 4:18 pm

      • ahora si me pudieras ayudar en crear un boton q al terminar de agregar los N registros al detalle precione un boton guardar y que se guarden en una base de datos mysql.
        te agradeceria un monton si me ayudas ok. cuidate

        Mario Arroyo

        junio 2, 2011 at 4:22 pm

  2. hola, probe el tutorial…y excelente funcional tal como lo necesitaba..pero al momento de insertalo a mi sitio web….este funciona mal..ya que cuando se desea agregar un nuevo campo, se va la otra pagina, en vez de aparecer en la misma dicho formulario…y asi tambien con modificar, el unico q funciona bien es el eliminar…me podrias ayudar por que sucede esto???

    John perea

    agosto 8, 2009 at 8:51 am

  3. @esteban: muchas gracias esteban por los saludos, cualquier duda, pues, aqui estoy.

    @john: hola john, podrias darme la direccion donde lo has subido???, asegurate que tienes la version 1.3.2 de jQuery, el jquery.validator en su version 1.5.2… espero tu respuesta.

    hector2c

    agosto 8, 2009 at 9:36 am

  4. Hola veo que eres de peru supongo lima igual que yo.. bueno realmente esta simpatico el blog.. me gusta el diseño y buenos articulos

    Saludos

    albert

    agosto 10, 2009 at 8:25 am

  5. @albert: hola, pues, soy de perú, pero del sur, la pequeña tacna, gracias por el saludo, espero pueda ayudarte en algo, nos vemos.

    hector2c

    agosto 10, 2009 at 11:11 am

  6. Hola Hector, me parece una excelente aplicación pero tengo un problema para ver los valores desde agregar.php? salu2

    Vengador Anónimo

    agosto 15, 2009 at 6:57 pm

    • @vengador_anónimo: pues, los valores se envian en formato post, los puedes recuperar desde agregar.php del siguiente modo:

      <?php
        $variable = $_POST['variable'];
        $nombre = $_POST['nombre'];
        $sql = "insert into tu_tabla values('$variable', '$nombre')";
        mysql_query($sql);
      ?>
      

      cualquier problema no dudes en escribir!, nos vemos!

      hector2c

      agosto 20, 2009 at 9:27 am

      • Saludos Amigo si funciona :D. Gracias

        Hher

        diciembre 13, 2009 at 4:50 pm

    • Hola Hector, me funciona perfecto pero solo el IE no me funciona en Firefox, Opera.
      si me pudieras responder te agradeceria…

      Saludos

      Mario Arroyo

      junio 9, 2011 at 4:50 pm

  7. Saludos buen tutorial, pero hay cierta cosilla que no contempla como por ejemplo si agrego mas de 30 registro y quiero borrar el primero hace un bucle infinito de confirmacion de eliminacion, por otro lado se podria insertar un registro es una posocion especifica???

    Elmer

    agosto 22, 2009 at 10:10 am

    • como eliminas el bucle que te aparece al insertar varios registros no logro hacer eso y esa parte es la que me falta me pueden ayudar

      Francisco Vega

      junio 9, 2011 at 9:54 am

  8. Hola mira estoy haciendo algo similar a esto para mi sitio, ya habia logrado insertar y eliminar, mi problema es el siguiente, la parte de actualizar, lo que necesito es poner un boton al lado de borrar, lo que tengo pensado es qeu ese boton ejecute una funcion javascrip, en este caso un getjson, y que me cargue el form con los datos a actualizar, que crees tu que es mejor implementacion un campo hidden en el formulario, o que cambie el submit con javascrip,que en ves de ir a la pagina guardar, vaya a la de actualizacion. espero tus observaciones ojala ayas entendido lo que trate de plantear.

    pd: Necesito que el actualizar sea en el mismo form de ingreso porque hize el actualizar en una ventana modal y no le gusto al cliente.

    saludos

    mauricio

    agosto 22, 2009 at 2:29 pm

  9. Hector,

    Te felicito por tu invento y muchas gracias!!!!

    Saludos desde Chile.

    ricardo avalos

    septiembre 5, 2009 at 7:34 pm

  10. Hola sabes encuentro ideal el ejemplo que has puesto, sin embargo , ¿ como guardas todos esos datos de la tabla en la base de datos (Mysql)?

    Alan

    octubre 18, 2009 at 10:46 pm

    • Hola Alan si me permite en responder en el archivo script.js en la funcion fr_agregar hice algunos cambios:
      cadena = cadena + “”;
      como veras lo adicione a un text y posterior mente en el mismo index.php me cree un
      $id=$id=$_POST['id'];
      for ($i=0;$iGuardarDetalle($id[$i],$reporte[$i]);
      }
      y listo con eso guarda, obvia mente tu completas la funcion.

      espero que te sirva.

      Mario Arroyo

      junio 9, 2011 at 4:58 pm

  11. Me seria de utilidad si dieras un ejemplo de buscar pero a ver si me explico: tienes todo tu contenido cargado en el dom osea en inputs… y quieres filtrar solo los imput q vallan coincidiendo con lo q estas actualmente escribiendo….

    hermano si pudieras explicarlo te agradeceria q me saques de mi ignorancia lo necesito….

    Alexander

    noviembre 10, 2009 at 6:27 pm

  12. muy util la aplicacion…..yo he tratado de implementar la funcion editar!!!! pero he tenido muchos problemas!!

    ojala que algun dia lo puedas hacer..

    =)

    rene

    noviembre 17, 2009 at 12:10 am

  13. hola, como estan todos, disculpen el mal soporte a este pequeño y sencillo trabajo, estoy terminando una nueva “versión”, cuenta con full eventos ajax, bd mysql, y nuevos plugins jquery, les sera de mucha ayuda… nos vemos!

    hector2c

    noviembre 17, 2009 at 4:48 pm

    • hola nuevamente!!! =) ….sabes que todavia no he podido implementar la funcion editar…la idea que tengo es poder hacer click en un icono editar, tal como lo hiciste en eliminar, pero con la diferencia que al hacer click los datos se me muestren en los input de “agregar” y desde ahi poder nuevamente agregarlo …estoy contra el tiempo ya que estoy realizando un proyecto en clases y tu aplicacion me ha servido bastante..

      Espero con ansias las nuevas mejoras de tu aplicacion

      saludos!!!!!

      rene

      noviembre 19, 2009 at 2:12 pm

      • @rene: hola!!! como estas, waa, te informo que ya casi termino, me falta la parte editar, agrege muuchas cositas, y tambien quite otras que no eran de lo mas optimas!!! uso mysql para hacerlo mas real!!!, nos vemos, date una vuelta mañana por el blog, tal vez ya lo publique…

        pta: tambien estoy implementando la parte de edicion, en el mismo formulario ;) nos vemos!!!

        hector2c

        noviembre 19, 2009 at 7:02 pm

  14. hola!!!…espero que lo publiques pronto..para poder probrarlo con mi base de datos que tambien la tengo en mysql…..

    espero pronto la publicacion!!!….y en cuanto lo pruebe te cuento que tal me fue =)

    saludos y gracias por la respuesta!!!

    rene

    noviembre 20, 2009 at 8:38 pm

  15. hola hector!!!….disculpa nuevamente por las molestias, pero me gustaria saber cuando tendrias publicada la aplicacion…para poder implementarlo en mi proyecto.

    gracias…espero tu respuesta (cualquier cosa tienes mi mail :D)…

    Saludos!!!!! y nuevamente disculpa las molestias…

    rene

    noviembre 22, 2009 at 1:35 pm

  16. hola!!! disculpa nuevamente molestarte pero me gustaria saber si has podido implementar la funcion editar en tu aplicacion…porque lo que es yo todavia tengo problemas para implementarlos…

    ojala me puedas ayudar o orientar un poco en esto ya que no soy muy bueno para el lenguaje web..

    saludos!!!!

    rene

    noviembre 28, 2009 at 12:43 am

  17. Saludos amigo, excelente tutorial, he seguido los comentarios :S pero aun no logro hacer la insercion por agregar.php este fue el codigo que use y no funciono, ayuda por favor.
    $id= ($_POST['id']);
    $tipo = ($_POST['tipo_telefono']);
    $telefono = ($_POST['telefono']);
    $cedula = $_POST(“cedula”);

    /*Base de datos*/
    $bd = db::getInstance();

    /*Insertando telefono*/
    $sql = “insert into usuario_telefono values(‘$cedula’,’$telefono’,’$tipo’,$id)”;
    $result = $bd->ejecutar($sql);

    Hher

    diciembre 12, 2009 at 6:10 pm

  18. Hola, esta funcionalidad es genial, pero cómo se hace para conectarlo con mysql, igual conocéis algún tutorial sencillo que me ayude a crear la base de datos.

    Antonio

    diciembre 14, 2009 at 6:54 am

  19. Hola Héctor, soy rodrigo tu promo de la upt, y en nombre del mundo te envío un mensaje, en él dice que por favor implementes tu ejemplo con funciones como editar y cargar los datos registrados por favor, ya tiene escala mundial esto :P. jaja saludos.

    Rodrigo Durá Espinoza

    diciembre 29, 2009 at 10:40 pm

  20. Hola Hector necesito tu ayuda para que al agregar los datos de una nueva columna con jquery queden almacenados ya que he probado tu ejemplo y se introduce una nueva columna pero al actualizar desaparece.

    Yako

    enero 27, 2010 at 7:24 am

  21. [...] jQuery – agregar y eliminar filas en una tabla [...]

  22. acabo de publicar una nueva versión, espero puedan verla, registrarse y dar su punto de vista. muchas gracias…

    http://hector2c.wordpress.com/2010/02/11/jquery-gestionar-una-tabla-con-ajax/

    hector2c

    febrero 11, 2010 at 10:09 am

  23. CHABON!!! TE AMOOOO!!!!!!!!!!! ME SALVASTEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEE

    Milton

    junio 9, 2010 at 4:25 pm

  24. que tal ha todos he creado una nueva version de la aplicacion que hice unos dias del muro del facebook; Lo he actualizado para que salga solo dos comentarios por noticia y que aparesca un enlace que diga ver el num de comentarios algo parecido al de facebook, tambien he corregido un BUG para que cuando se borre una noticia o un comentario no salte al principio de la pagina tal y como lo hacia la version anterior.
    Pueden ver la aplicacion en funcionamiento aqui: http://www.getvay.com/WallFacebook/index.php
    lo pueden descargar de aqui: http://www.getvay.com/pg/file/macs1407/read/1712/wallfacebook-10

    maikol arley cucunuba

    agosto 15, 2010 at 8:50 am

  25. y donde uno pude conseguir un demo o bajar un ejemplo solo tienen los archivos pero no tienen una demostracion.

    danny

    agosto 31, 2010 at 9:28 am

  26. Buenísimo el ejemplo, lo entendí y me funcionó sin probelmas, muchas gracias!!

    juan caio

    noviembre 26, 2010 at 5:23 am

  27. si sale es el esxito

    jairo

    febrero 16, 2011 at 12:24 pm

  28. por que no puedo incluir etiquetas

    jairo

    febrero 16, 2011 at 12:25 pm

  29. ertertt

    terter

    abril 18, 2011 at 11:32 am

  30. hghhfhfhf

    terter

    abril 18, 2011 at 11:32 am

  31. hhgfhh fgh

    terter

    abril 18, 2011 at 11:33 am

  32. Pueden hacer uno utilizando jsp????, gracias

    Hector

    junio 10, 2011 at 1:12 pm

  33. Buen día amigo. quizas ya no estes pendiente de este post, pero tengo un detalle que acotarte con respecto a este demo. cada vez que insertas un nuevo registro a la tabla llamas a la función fn_dar_eliminar(). Pues bien, el problema esta en que cuando presionas el botón para eliminar un registro de la tabla este proceso se repite tantas veces como hayas insertado registros, dado que la función se ejecuta el mismo número de veces. si puedes resolver el problema y ayudarme te o agradecería

    Wilman

    octubre 13, 2011 at 11:12 am

  34. Excelente material. Lo probe y funciona de 10! felicidades. Saludos desde Argentina

    Christian

    febrero 17, 2012 at 7:30 am

  35. Interesante tu aplicación, pero existe forma de llamar el contenido de dichas tablas?

    ninosimeon

    marzo 2, 2012 at 1:28 am


Deja un comentario

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

Seguir

Recibe cada nueva publicación en tu buzón de correo electrónico.

%d personas les gusta esto: