jQuery – agregar y eliminar filas en una tabla
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
descarga
puedes descargar la aplicacion desde el siguiente enlace.
cualquier 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/
Excelente aporte amigo!
Es exactamente lo que necesitaba, pero mejor que como lo había pensado
saludos desde Fúnes, Argentina!
Esteban López Adriano
agosto 5, 2009 a 7:06 pm
Hola Hector, la verdad te pasaste exelente trabajo es bueno el material. Gracias….
Mario Arroyo
junio 2, 2011 a 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 a 4:22 pm
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 a 8:51 am
@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 a 9:36 am
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 a 8:25 am
@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 a 11:11 am
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 a 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 a 9:27 am
Saludos Amigo si funciona
. Gracias
Hher
diciembre 13, 2009 a 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 a 4:50 pm
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 a 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 a 9:54 am
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 a 2:29 pm
Hector,
Te felicito por tu invento y muchas gracias!!!!
Saludos desde Chile.
ricardo avalos
septiembre 5, 2009 a 7:34 pm
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 a 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 a 4:58 pm
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 a 6:27 pm
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 a 12:10 am
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 a 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 a 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 a 7:02 pm
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 a 8:38 pm
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
)…
Saludos!!!!! y nuevamente disculpa las molestias…
rene
noviembre 22, 2009 a 1:35 pm
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 a 12:43 am
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 a 6:10 pm
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 a 6:54 am
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
. jaja saludos.
Rodrigo Durá Espinoza
diciembre 29, 2009 a 10:40 pm
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 a 7:24 am
[...] jQuery – agregar y eliminar filas en una tabla [...]
jQuery – gestionar una tabla con ajax « ¿hasta donde podre llegar?
febrero 11, 2010 a 9:54 am
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 a 10:09 am
CHABON!!! TE AMOOOO!!!!!!!!!!! ME SALVASTEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEE
Milton
junio 9, 2010 a 4:25 pm
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 a 8:50 am
y donde uno pude conseguir un demo o bajar un ejemplo solo tienen los archivos pero no tienen una demostracion.
danny
agosto 31, 2010 a 9:28 am
Buenísimo el ejemplo, lo entendí y me funcionó sin probelmas, muchas gracias!!
juan caio
noviembre 26, 2010 a 5:23 am
si sale es el esxito
jairo
febrero 16, 2011 a 12:24 pm
por que no puedo incluir etiquetas
jairo
febrero 16, 2011 a 12:25 pm
ertertt
terter
abril 18, 2011 a 11:32 am
hghhfhfhf
terter
abril 18, 2011 a 11:32 am
hhgfhh fgh
terter
abril 18, 2011 a 11:33 am
Pueden hacer uno utilizando jsp????, gracias
Hector
junio 10, 2011 a 1:12 pm
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 a 11:12 am
Excelente material. Lo probe y funciona de 10! felicidades. Saludos desde Argentina
Christian
febrero 17, 2012 a 7:30 am
Interesante tu aplicación, pero existe forma de llamar el contenido de dichas tablas?
ninosimeon
marzo 2, 2012 a 1:28 am