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>';