如何为JS动态创建的HTML表格新增总价列与复选框列？

你现有代码跑不通有3个直接原因：

1. 内层循环只遍历了原始返回的8个字段，循环跑完没追加你要的总价、复选框两个单元格，列数和表头不匹配
2. 写的三目判断没有把结果拼接到result字符串里，等于判断完啥也没渲染
3. 数值校验方法拼写错误，把isNaN写成了isNan，导致价格列的输入框判断逻辑失效

下面是修正后的完整loadItems函数，直接替换原有代码即可：

function loadItems() {
    const orderPo = document.getElementById('selectOrderPo');
    const selectedOrderPo = orderPo.options[orderPo.selectedIndex].text;

    const supplier = document.getElementById('selectSupplier');
    const selectedSupplier = supplier.options[supplier.selectedIndex].text;

    google.script.run.withSuccessHandler(function(ar) {
        const div = document.getElementById('po-items');
        if (ar == 'No items were found') {
            div.innerHTML = "There are no items for this Order PO Number and Supplier chosen above!";
            return;
        }
        if (ar && ar.length != 0) {
            let result = "<br><div class='card' id='card'><table class='table table-borderless table-hover table-vcenter' id='dtable'>" +
                "<thead style='white-space: nowrap'>" +
                "<tr>" +
                "<th style='width: 4%' class='text-center'>Tela</th>" +
                "<th style='width: 25%' class='text-center'>Color</th>" +
                "<th style='width: 4%' class='text-center'>Pantone</th>" +
                "<th style='width: 3%' class='text-center'>Contenido</th>" +
                "<th style='width: 17%' class='text-center'>Acho(m)</th>" +
                "<th style='width: 12%' class='text-center'>Peso(gsm)</th>" +
                "<th style='width: 24%' class='text-center'>Precio/m (COP)</th>" +
                "<th style='width: 24%' class='text-center'>Metros</th>" +
                "<th style='width: 24%' class='text-center'>Precio Total sin IVA</th>" +
                "<th style='width: 24%' class='text-center'>Sel.</th>" +
                "</tr>" +
                "</thead>" +
                "<tbody>";
            console.log('Dados para a tabela: ' + JSON.stringify(ar))
            for (let i = 0; i < ar.length; i++) {
                result += "<tr>";
                // 先渲染原始8列数据
                for (let j = 0; j < ar[i].length; j++) {
                    // 第7列（索引6）渲染价格输入框，校验第5列（索引4，宽度值）为有效数字
                    if (j === 6 && !isNaN(ar[i][4])) {
                        // 给输入框绑行索引、对应米数（原始数组最后一位，去掉单位转数字），方便后续算总价
                        const meterVal = parseFloat(ar[i][7]) || 0;
                        result += `<td><input type='number' min='0' step='0.01' name='priceField' data-row-index='${i}' data-meters='${meterVal}' class='form-control text-center' value='${ar[i][j] || ""}'></td>`;
                    } else {
                        result += `<td class='align-middle' style='word-wrap: break-word;max-width: 160px;text-align:center'>${ar[i][j]}</td>`;
                    }
                }
                // 新增第一列：总价列
                result += `<td class='align-middle text-center total-cell' data-row-index='${i}'></td>`;
                // 新增第二列：复选框列
                result += `<td class='align-middle text-center'><input type='checkbox' class='form-check-input row-select' data-row-index='${i}'></td>`;
                result += "</tr>";
            }
            result += "</tbody></table></div><br>";
            div.innerHTML = result;
        } else {
            div.innerHTML = "No items found.";
            return;
        }
    }).loadItems(selectedOrderPo, selectedSupplier);
}

修改说明 #

• 价格输入框增加了data-row-index和data-meters属性，提前存好每行的米数参数，你写总价计算逻辑时不用再额外找对应行的数值
• 总价单元格加了total-cell类和行索引标记，更新数值时可以直接精准定位
• 复选框加了row-select类和行索引标记，后续做选中、批量操作可以直接取
• 所有单元格都正确拼接到了结果字符串里，tbody列数和表头的10列完全对应，不会出现表格错位

总价自动计算参考逻辑 #

表格渲染完成后，直接给价格输入框绑定输入事件即可，不用单独给每个输入框加事件：

document.addEventListener('input', function(e) {
    if (e.target.name === 'priceField') {
        const rowIdx = e.target.dataset.rowIndex;
        const price = parseFloat(e.target.value) || 0;
        const meters = parseFloat(e.target.dataset.meters) || 0;
        // 总价计算规则可以根据业务自行调整，当前是 单价*米数
        const totalPrice = (price * meters).toFixed(2);
        document.querySelector(`.total-cell[data-row-index="${rowIdx}"]`).textContent = totalPrice;
    }
})

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