如何遍历HTML表格获取全部行数据并批量转移到另一张表格

修正后的实现代码 #

function TransfereDados() {
    // 全局公共字段提到循环外取值，避免重复查询DOM
    const qtdMaterial = $("#fornecedorPrecoMaterialQtd").val();
    // 提前获取目标表格容器，减少循环内重复查询
    const targetList = $('#tabela-materiais-oculto').find('#lista-materiais-oculto');

    // 遍历源表格所有数据行
    $('#tabela-fornecedorPreco #lista-fornecedorPreco tr').each(function() {
        // 基于当前行查找对应输入框，解决ID重复只能取到第一行值的问题
        const $currentRow = $(this);
        const idMaterial = $currentRow.find('input[name="fornecedor_material[]"]').val();
        const idFornecedor = $currentRow.find('input[name="fornecedor_id[]"]').val();
        const precoUnitario = $currentRow.find('input[name="fornecedor_preco_unitario[]"]').val();
        const precoTotal = $currentRow.find('input[name="fornecedor_preco_total[]"]').val();

        // 拼接新行插入目标表格
        const newRow = `<tr style="display:none;">
            <td style="display:none;"><input type="hidden" name="fornecedor_material[]" value="${idMaterial}"></td>
            <td style="display:none;"><input type="hidden" name="qtd_material[]" value="${qtdMaterial}"></td>
            <td style="display:none;"><input type="hidden" name="fornecedor_id[]" value="${idFornecedor}"></td>
            <td style="display:none;"><input type="hidden" name="fornecedor_preco_unitario[]" value="${precoUnitario}"></td>
            <td style="display:none;"><input type="hidden" name="fornecedor_preco_total[]" value="${precoTotal}"></td>
        </tr>`;
        targetList.append(newRow);
    });
}

核心改动说明 #

• 改用jQuery的each方法遍历行，避免了jQuery对象无法直接访问原生DOM的rows属性的问题
• 所有字段取值改为基于当前行用name属性选择器查找，解决你动态生成行时ID重复、直接用ID选择器永远只能拿到第一行数据的问题
• 修复了原代码中变量重复覆盖、precoUnitario/precoTotal变量未定义的语法错误
• 公共变量、目标容器查找提前到循环外，减少不必要的DOM查询，运行效率更高

跨页面传输补充说明 #

如果你是要把数据传到不同页面的表格，无法直接操作另一个页面的DOM，需要先把收集到的所有行数据序列化后存在localStorage中，在目标页面加载时读取localStorage的数据再渲染表格即可。

内容的提问来源于stack exchange，提问作者William Gerenutti