como crear una tabla a partir de datos ingresados en formulario en un popup en jquery?

publicado por: Anonymous

tengo un formulario en un index.html, este formulario contiene información de material que se da de baja, en una columna de este formulario hay un botón agregar, el cual levanta un popup con otro formulario que es el detalle de lo que se dara de baja (item, cantidad, contenido, descripción), en este popup al terminar de llenar los datos solicitados, hay un botón que dice agregar.
cuando se presiona el botón agregar, los datos ingresados se tienen que ingresar en una tabla que se crea en el momento que se apreta el botón.

introducir la descripción de la imagen aquí

introducir la descripción de la imagen aquí

este es mi codigo en javascript

$("#AgrDescripcion").click(function() {
    $("#cant").val("");
    $("#uMedida").val("");
    $("#txtDescripcionActividad").val("");
    $("#condicion").val(""); 
    $("#AC").val("");

    $("#modalIngresaDescripcion").dialog({
        open: function(event, ui) {
        jQuery('.ui-dialog-titlebar-close').remove('.ui-dialog-titlebar-close');
    },
        title: "Prueba",
        show: {
            effect: "blind",
            duration: 1000
        },
        hide: {
            effect: "explode",
            duration: 1000
        },
        resizable: false,
        height:200,
        width:850,
        modal: true,

        buttons: {
            "Aceptar": function(){
                var params={};
                params.cant=$('#cant').val();
                params.uMedida=$('#uMedida').val();
                params.descrip=$('#txtDescripcionActividad').val();
                params.condi=$('#condicion').val();
                params.aFijo=$('#AC').val();

                console.log(params);

                var n = $('tr:last td', $("#addTable")).length;
                var tds = '<tr>';
                for(var i = 0; i < n; i++){
                  tds += '<td>nuevo</td>';
                }
                tds += '</tr>';
                $("#addTable").append(tds);
            },
            "Salir": function() {
              $(this).dialog("close");
            }
        }       
    });

});

y esta es la tabla que se llena

<div id="agregaTabla">
        <table id="addTable">
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>

        </table>
    </div>

el tema ahora, es que no se como pasar los parámetros, solo me muestra ‘nuevo’

solución

Puedes sustituir el ciclo que agregas las table-data (td) por este codigo

            /*for(var i = 0; i < n; i++){
              tds += '<td>nuevo</td>';
            }*/
            tds += '<td>' + params.cant + '</td>';
            tds += '<td>' + params.uMedida + '</td>';
            tds += '<td>' + params.descrip + '</td>';
            tds += '<td>' + params.condi + '</td>';
            tds += '<td>' + params.aFijo + '</td>';

            tds += '</tr>';

Donde simplemente ponemos los parametros que ya capturaste antes


Concatenar codigo html para despues agregarlo al dom no simpre es la mejor opción, sobretodo cuando se tiene que agregar mas propiedas a cada elemento.

Podemos hacerlo creando objetos jQuery.

Como muestro a continuación:

            var trow = $('<tr/>', {
                class : 'alguna-clase'
            }).appendTo('#addTable');

            $('<td/>',{                    
                text: params.cant
            }).appendTo(trow);
            $('<td/>',{                   
                text: params.uMedida
            }).appendTo(trow);
            $('<td/>',{                    
                text: params.descrip
            }).appendTo(trow);
            $('<td/>',{                   
                text: params.condi
            }).appendTo(trow);
            $('<td/>',{                    
                text: params.aFijo
            }).appendTo(trow);

Puedes ver este jsfiddle para ver como funciona, donde he comentado las otras partes que no se usarian

Respondido por: Anonymous

Leave a Reply

Your email address will not be published.