获取表中的所有行值

Question

I have the following function to add rows to my table

var div = $('#tabela-fornecedorPreco');
            var newRow = '<tr>' +
                '<td><input type="hidden" id="fornecedor_material" name="fornecedor_material[]" value="' + idMaterial + '">' + nomeMaterial + '</td>' +
                '<td><input type="hidden" id="fornecedor_id" name="fornecedor_id[]" value="' + fornecedorVal + '">' + fornecedor + '</td>' +
                '<td><input type="hidden" id="fornecedor_preco_unitario" name="fornecedor_preco_unitario[]" value="' + precoUnitarioCalculado + '">' + precoUnitarioCalculado + '</td>' +
                '<td><input type="hidden" id="fornecedor_preco_total" name="fornecedor_preco_total[]" value="' + precoTotalCalculado + '">' + precoTotalCalculado + '</td>' +
                '<td class="text-center"><a href="javascript:void(0);" class="label label-primary remover-telefone" onclick="removerLinha(this);" title="Excluir"><i class="fas fa-times"></i></a></td>' +
                '</tr>';
            div.find('#lista-fornecedorPreco').append(newRow);

I am trying to get all the data in this table with one function, to transfer the other, to another page using the following function:

function TransfereDados() {
var tabelaModal = $('#tabela-fornecedorPreco');
for (var i = 0, row; row = tabelaModal.rows[i]; i++) {
    for (var j = 0, col; col = row.cells[j]; j++) {
        var idMaterial = $("#fornecedorPrecoMaterialId").val();
        var qtdMaterial = $("#fornecedorPrecoMaterialQtd").val();
        var idFornecedor = $("#fornecedor_id").val();
        var idFornecedor = $("#fornecedor_preco_unitario").val();
        var idFornecedor = $("#fornecedor_preco_total").val();
        var div = $('#tabela-materiais-oculto');
        var newRow = '<tr style="display:none;">' +
            '<td style="display:none;"><input type="hidden" id="fornecedor_material" name="fornecedor_material[]" value="' + idMaterial + '"></td>' +
            '<td style="display:none;"><input type="hidden" id="qtd_material" name="qtd_material[]" value="' + qtdMaterial + '"></td>' +
            '<td style="display:none;"><input type="hidden" id="fornecedor_id" name="fornecedor_id[]" value="' + idFornecedor + '"></td>' +
            '<td style="display:none;"><input type="hidden" id="fornecedor_preco_unitario" name="fornecedor_preco_unitario[]" value="' + precoUnitario + '"></td>' +
            '<td style="display:none;"><input type="hidden" id="fornecedor_preco_total" name="fornecedor_preco_total[]" value="' + precoTotal + '"></td>' +
            '</tr>';
        div.find('#lista-materiais-oculto').append(newRow);
    }
}

}

I would like the TransfereDados () function loop to go through all my first table and get all the values so that I can put it in the second table.

Answer 1

You are using same ids for mutliple inputs so first change them to class . Then, use .each loop to iterate through your table trs and then using .find("classname") get input values from first table and assign them to second table.

Demo Code :

 TransfereDados(); function TransfereDados() { //loop through trs $('#lista-fornecedorPreco tr').each(function() { var selector = $(this); //get required input value using `.find` var idMaterial = selector.find(".fornecedor_material").val(); var qtdMaterial = selector.find(".fornecedor_id").val(); //i am not sure what is this.. var idFornecedor = selector.find(".fornecedor_id").val(); var precoUnitario = selector.find(".fornecedor_preco_unitario").val(); var precoTotal = selector.find(".fornecedor_preco_total").val(); console.log("idMaterial -> " + idMaterial + " precoUnitario-> " + precoUnitario + " precoTotal -> " + precoTotal) var div = $('#tabela-materiais-oculto'); //change `id` to `class` (add disply:none type="hidden" at your end..) i have remove them just for demo.. var newRow = '<tr style="">' + '<td style=""><input type="text" class="fornecedor_material" name="fornecedor_material[]" value="' + idMaterial + '"></td>' + '<td style=""><input type="text" class="qtd_material" name="qtd_material[]" value="' + qtdMaterial + '"></td>' + '<td style=""><input type="text" class="fornecedor_id" name="fornecedor_id[]" value="' + idFornecedor + '"></td>' + '<td style=""><input type="text" class="fornecedor_preco_unitario" name="fornecedor_preco_unitario[]" value="' + precoUnitario + '"></td>' + '<td style=""><input type="text" class="fornecedor_preco_total" name="fornecedor_preco_total[]" value="' + precoTotal + '"></td>' + '</tr>'; div.find('#lista-materiais-oculto').append(newRow); }) }

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <table id="tabela-fornecedorPreco" class="table"> <tbody id="lista-fornecedorPreco"> <tr> <:--change ids to class--> <td><input type="hidden" class="fornecedor_material" name="fornecedor_material[]" value="1">Abc1</td> <td><input type="hidden" class="fornecedor_id" name="fornecedor_id[]" value="1">A1</td> <td><input type="hidden" class="fornecedor_preco_unitario" name="fornecedor_preco_unitario[]" value="3">3 <td> <td><input type="hidden" class="fornecedor_preco_total" name="fornecedor_preco_total[]" value="3">3</td> <td class="text-center"><a href="javascript;void(0);" class="label label-primary remover-telefone" onclick="removerLinha(this):" title="Excluir"><i class="fas fa-times">x</i></a></td> </tr> <tr> <td><input type="hidden" class="fornecedor_material" name="fornecedor_material[]" value="2">Abc2</td> <td><input type="hidden" class="fornecedor_id" name="fornecedor_id[]" value="2">A2</td> <td><input type="hidden" class="fornecedor_preco_unitario" name="fornecedor_preco_unitario[]" value="14">14 <td> <td><input type="hidden" class="fornecedor_preco_total" name="fornecedor_preco_total[]" value="12">12</td> <td class="text-center"><a href="javascript;void(0);" class="label label-primary remover-telefone" onclick="removerLinha(this):" title="Excluir"><i class="fas fa-times">x</i></a></td> </tr> </tbody> </table> Table 2: <table id="tabela-materiais-oculto" class="table"> <tbody id="lista-materiais-oculto"> </tbody> </table>