Create dynamic html table by setting the class or id to rescue later with jquery

Asked

Viewed 45 times

0

I’m creating a dynamic table as the user adds content.

Then I need to take this data and create the object and send it to the controller,

to create the table I used the following way:

function inserir() {

    var table = document.getElementById("tabela");

    var codigo = document.getElementById('codigo').value;
    var qtde = document.getElementById('qtde').value;
    var descricao = document.getElementById('descricao').value;
    var peso = document.getElementById('peso').value;
    var unit = document.getElementById('unit').value;
    var valor = document.getElementById('valor').value;

    var row = table.insertRow(-1);
    
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    var cell3 = row.insertCell(2);
    var cell4 = row.insertCell(3);
    var cell5 = row.insertCell(4);
    var cell6 = row.insertCell(5);
    var cell7 = row.insertCell(6);
 
    cell1.innerHTML = "<td><input type='checkbox' /></td>";
    cell2.innerHTML = codigo;
    cell3.innerHTML = qtde;
    cell4.innerHTML = descricao;
    cell5.innerHTML = peso;
    cell6.innerHTML = unit;
    cell7.innerHTML = valor;
}

It works ok, I can add. To mount the object I’m doing so:

    $("#btn-resgatar").click(function () {
        var todos_dados = [];

        $('.item').each(function () {

            var entidade_dados = {
                codigo: $(this).children()[0].innerText,
                qtde: $(this).children()[1].innerText,
                descricao: $(this).children()[2].innerText,
                peso: $(this).children()[3].innerText,
                unit: $(this).children()[4].innerText,
                valor: $(this).children()[5].innerText,
            };

            todos_dados.push(entidade_endereco);
        });
    });

but I can only use this function of taking the data, when I already pre-mounted the table.

I would like to define the name of "class" or "id" in real time, example "<tr class="item">.

About innerHTML, I saw some places that n would be the best way could show me a way to study?

  • You tried Row.classname = 'item'?

  • I have a similar scheme that you need working on this link https://github.com/cleDiego/ParetoUFPR/blob/master/js/pareto.js, note $("#formInsert"), $("#formUpdate") and tableUpdate(). The idea is to keep the data in an array and always update the table with this data. If you have any questions let me know that I can better sort out what you just need.

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.