獲取表中的所有行值

Question

我有以下 function 向我的表中添加行

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

我正在嘗試使用一個 function 獲取此表中的所有數據，然后使用以下 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);
    }
}

}

我想通過我的所有第一個表將 TransfereDados () function 循環到 go 並獲取所有值，以便我可以將其放入第二個表中。

Answer 1

您對多個輸入使用相同的ids ，因此首先將它們更改為class 。 然后，使用.each循環遍歷您的表 trs，然后使用.find("classname")從第一個表中獲取輸入值並將它們分配給第二個表。

演示代碼：

 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>