En el post anterior Como agregar filas o rows a una tabla dinamicamente mediante JavaScript mostré una manera como agregar filas a una tabla (aplicable a cualquier elemento) utilizando JavaScript. Ahora veremos de que manera podemos hacerlo con jQuery, un Framework bastante sencillo de utiliza, pero no menos potente por ello.
La base es crear una cadena con el HTML que irá dentro de la fila o TR de nuestra tabla. Queda más o menos así.
function agregarFila(obj){ $("#cant_campos").val(parseInt($("#cant_campos").val()) + 1); var oId = $("#cant_campos").val(); var nombre = $("#txtNombre").val(); var edad = $("#txtEdad").val(); var direccion = $("#txtDireccion").val(); var sexo = $("#selSexo").val(); var estCivil = $("#selEstCivil").val(); var strHtml1 = "<td>" + nombre + '<input type="hidden" id="hdnNombre_' + oId + '" name="hdnNombre_' + oId + '" value="' + nombre + '"/></td>'; var strHtml2 = "<td>" + edad + '<input type="hidden" id="hdnEdad_' + oId + '" name="hdnEdad_' + oId + '" value="' + edad + '"/></td>' ; var strHtml3 = "<td>" + direccion + '<input type="hidden" id="hdnDireccion_' + oId + '" name="hdnDireccion_' + oId + '" value="' + direccion + '"/></td>' ; var strHtml4 = "<td>" + sexo + '<input type="hidden" id="hdnSexo_' + oId + '" name="hdnSexo_' + oId + '" value="' + sexo + '"/></td>' ; var strHtml5 = "<td>" + estCivil + '<input type="hidden" id="hdnEstCivil_' + oId + '" name="hdnEstCivil_' + oId + '" value="' + estCivil + '"/></td>' ; var strHtml6 = '<td><img src="images/delete.png" width="16" height="16" alt="Eliminar" onclick="if(confirm(\'Realmente desea eliminar este detalle?\')){eliminarFila(' + oId + ');}"/>'; strHtml6 += '<input type="hidden" id="hdnIdCampos_' + oId +'" name="hdnIdCampos[]" value="' + oId + '" /></td>';
Una vez hecho esto procedemos a agregar la fila al formulario y luego le asignamos el HTML creado anteriormente
var strHtmlTr = "<tr id='rowDetalle_" + oId + "'></tr>"; var strHtmlFinal = strHtml1 + strHtml2 + strHtml3 + strHtml4 + strHtml5 + strHtml6; $("#tbDetalle").append(strHtmlTr); $("#rowDetalle_" + oId).html(strHtmlFinal);
y para eliminar una fila
function eliminarFila(oId){ $("#rowDetalle_" + oId).remove(); return false; }
Muy sencillo y no requiere grandes conocimiento en ningún lenguaje en particular.
Espero le sea de ayuda y recuerden que estoy atento a sus comentarios.
Este ejemplo lo puedes ver en el siguiente enlace:
 |
ejemplo funcionando de Agregar Filas con JavaScript |
Tambien puedes decargar estos ejemplos:
 |
archivos de Agregar Filas con JavaScript |
Si te gustó o te sirvió, ya sabes que hacer  |
|
David Roa
dijo:
27 de Diciembre, 2009 - 23:14
Amigo, muchas gracias por este tutorial, la verdad estaba partiéndome la cabeza buscando un ejemplo como este para implementarlo en mi proyecto, muchos saludos