JS新增表格行时Cal_Total_Amount函数仅对首行生效问题咨询

• ID重复冲突：HTML规范要求页面内ID必须全局唯一，你每次新增行都给金额显示label设置了相同的Total_Amount、VAT_amount固定ID，document.getElementById()只会匹配到页面中第一个出现的对应ID元素，也就是初始行的元素，所以新行点击后只会修改初始行的内容，看起来就像新行事件未生效。
• 函数参数不匹配：你绑定事件时写了onclick="Cal_Total_Amount(this);"传入了当前触发元素，但函数定义没有设置参数接收这个元素，无法定位到当前点击所在的行。

修改addRow函数，去掉固定ID改用类标识 #

移除重复的固定ID，给需要操作的元素添加对应类名，避免ID冲突：

function addRow() {
    var table = document.getElementById("dataTable");
    var row = table.insertRow(table.rows.length - 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);
    var cell8 = row.insertCell(7);
    var cell9 = row.insertCell(8);

    cell1.innerHTML = '<label style="width:100%" class="form-control total-amount" placeholder=" " autocomplete="off"  onclick="Cal_Total_Amount(this);" ></label>';
    cell2.innerHTML = '<label style="width:100%" class="form-control vat-amount" placeholder=" " autocomplete="off"  onclick="Cal_Total_Amount(this);" ></label>';
    // 以下为示例：如果单价、税率是每行独立字段，给对应输入框加类名，可根据你实际字段位置调整类名归属
    cell3.innerHTML = '<input style="width:100%" type="text" class="form-control total-price" placeholder=" " autocomplete="off" />';
    cell4.innerHTML = '<input style="width:100%" type="text" class="form-control vat-rate" placeholder=" " autocomplete="off" />';
    cell5.innerHTML = '<input style="width:100%" type="text" class="form-control" placeholder=" " autocomplete="off" />';
    cell6.innerHTML = '<input style="width:100%" type="month" class="form-control" name="start" min="2021-10" value="2021-10">';
    cell7.innerHTML = '<input style="width:100%" type="text" class="form-control" placeholder=" " autocomplete="off" />';
    cell8.innerHTML = '<input style="width:100%" type="text" class="form-control" placeholder=" " autocomplete="off" />';
    cell9.innerHTML = '<button type="button" class="btn_delete" onclick="deleteRow(this)"><i class="bx bx-trash"></i></button>';
}

修改Cal_Total_Amount函数，按行定位元素 #

增加参数接收触发元素，通过父节点定位到当前点击所在的行，只操作当前行内的元素：

function Cal_Total_Amount(el) {
    // 获取当前点击元素所在的表格行
    const currentRow = el.closest('tr');
    // 如果Total_Price和VAT是全局唯一字段，直接用原全局取值逻辑即可
    // const Tp = +document.getElementById("Total_Price").value;
    // const v = +document.getElementById("VAT").value;

    // 如果Total_Price和VAT是每行独立字段，从当前行内取值
    const Tp = +currentRow.querySelector('.total-price').value;
    const v = +currentRow.querySelector('.vat-rate').value;

    const VATmont = (Tp * v) / 100;
    const Total = VATmont + Tp;
    // 只修改当前行的金额显示
    currentRow.querySelector('.total-amount').innerHTML = Total;
    currentRow.querySelector('.vat-amount').innerHTML = VATmont;
}

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