how to create a table from data entered in the form in a popup in jquery?

Question

how to create a table from data entered in the form in a popup in jquery?

Navigation

#1 by (2 votes)

4

I have a form in an index.html, this form contains material information that is removed, in a column of this form there is an add button, which raises a popup with another form that is the detail of what will be unsubscribed (item, quantity, content, description), in this popup when you finish filling in the requested information, there is a button that says add. when the add button is pressed, the entered data must be entered in a table that is created at the moment the button is pressed.

enter the description of the image here

this is my javascript code

$("#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");
            }
        }       
    });

});

and this is the table that is filled

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

        </table>
    </div>

the issue now, is that I do not know how to pass the parameters, it just shows me 'new'

javascript jquery html

asked by elsa 20.07.2016 в 15:35

source

1 answer

Swap rows between tables Share article to WhatsApp via WebView

score 2 · Accepted Answer

You can replace the cycle that you add table-data ( td ) with this code

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

Where we simply put the parameters you already captured before

Concatenating html code to then add it to the sun is not always the best option, especially when you have to add more properties to each element.

We can do it by creating jQuery objects.

As I show below:

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

You can see this jsfiddle to see how it works, where I have commented on the other parts that would not be used