Javascript 生成的表事件侦听器行不立即工作

我有一张这样的桌子：

我已将事件侦听器assetTableEvent（）添加到表中的每个文本框中。我的问题是，当我向表中添加新行时，我也向表中添加了相应的事件侦听器assetTableEvent（），但输入值时不会弹出总值，它仅在下一行输入值时显示

函数assetTableEvent（）{
设total=0；
for（var k=0；k0&&o.value.length>0）{
t、 value=Number.parseInt（a.value-o.value）；
total=（Number.parseInt（t.value）+Number.parseInt（total））；
document.getElementById（“totalAssets”）.value=Number.parseInt（总计）；
}
}

}

我甚至尝试在每次发生更改时调用assetTableEvent（），但它就是不起作用。有人可以在Javascript中帮助我如何使动态添加的行与上面的行一样的事件侦听器相对应

资产表的HTML：

<div id="calcContainer">

<div id = "headingText" >
Child Maintenance Calculator
</div>

<div id="startPage">

<button id="startBtn">Start</button>
</div>

<div id="asset">
 <table id="assetTable">
     <tr>

    <th>Asset</th>
    <th>Value</th>
    <th>Own</th>
    <th>Total</th>

</tr>
 </table>
 <div id="totalAssetsDiv">
 <Label for ="totalAssets">Total Assets</Label>
 <input type="number" id = "totalAssets" readonly="true">

 <br>
</div>
 <div id ="rowOps">
    <br> <button id="addRow" class = "addDel">Add Row</button>
   <button id="removeRow" class = "addDel1">Delete Row</button><br>
 </div>
</div>

儿童维护计算器
开始
资产
价值
拥有
全部的
总资产增长



添加行
删除行

并添加行事件侦听器：

   document.getElementById("addRow").addEventListener("click", function () {

    var table = document.getElementById("assetTable");
    var row = table.insertRow();

    for (let j = 0; j < 4; j++) {
        var tb = document.createElement("INPUT");
        var value = "", idNum = "";

        if (j == 0) {
            tb.setAttribute("type", "text");
            tb.value = value;

        }
        else {
            tb.setAttribute("type", "number");
        }


        //Setting textbox id
        switch (j) {
            case 0:
                idNum = "a";
                break;

            case 1:
                idNum = "v";
                break;

            case 2:
                idNum = "o";
                break;

            case 3:
                idNum = "t";
                break;

        }

        tb.id = idNum + (table.rows.length);

        if (tb.id.includes('t')) {
            tb.setAttribute("readOnly", "true");
        }

        tb.classList.add("assetTBox");
        let cell = row.insertCell(j);
        tb.addEventListener("input", assetTableEvent, false);
        cell.appendChild(tb);
     

    }
});

document.getElementById（“addRow”）.addEventListener（“单击”，函数）（）{
var table=document.getElementById（“资产”）；
var row=table.insertRow（）；
for（设j=0；j<4；j++）{
var tb=document.createElement（“输入”）；
var值=”，idNum=”；
如果（j==0）{
tb.setAttribute（“类型”、“文本”）；
tb.value=值；
}
否则{
tb.setAttribute（“类型”、“编号”）；
}
//设置文本框id
开关（j）{
案例0：
idNum=“a”；
打破
案例1：
idNum=“v”；
打破
案例2：
idNum=“o”；
打破
案例3：
idNum=“t”；
打破
}
tb.id=idNum+（table.rows.length）；
如果（tb.id.includes（'t'））{
tb.setAttribute（“只读”、“真”）；
}
tb.classList.add（“assetTBox”）；
设单元=行插入单元（j）；
tb.addEventListener（“输入”，assetTableEvent，false）；
附肢细胞（tb）；
}
});

尝试使用增量ID的工作量超过了它的价值，尤其是当您开始删除行时

我建议您改用类，并将事件侦听器委托给表本身。当发生输入事件时，获取最近的行并查询该行中的元素以获得行总数，然后查询所有行总数以获得主总数

具有函数addrow的基本示例

const table=document.querySelector（“#myTable”），
cloneRow=table.rows[0].cloneNode（true）；
表.addEventListener（'输入'，（e）=>{
如果（如目标匹配（“.数量，.价格”））{
const row=e.target.closest（'tr'），
price=row.querySelector（'.price'）.valueAsNumber | | 0，
数量=行查询选择器（'.qty'）。值为编号| | 0；
行查询选择器（'.amt'）。值=数量*价格；
setTotalAmt（）
}
});
document.querySelector（“#添加行”）.addEventListener（'click'，（e）=>{
表.appendChild（cloneRow.cloneNode（true））
});
函数setTotalAmt（）{
const sum=[…table.querySelectorAll（'.amt'）].reduce（（a，el）=>a+（+el.value | | 0），0）
document.querySelector（“#total”）.value=sum；
}

添加行
总数：
数量：
价格：
金额：

@charlietfl的孤独更优雅，但是如果您想知道代码中的问题是什么，您应该将

   document.getElementById("addRow").addEventListener("click", function () {

    var table = document.getElementById("assetTable");
    var row = table.insertRow();

    for (let j = 0; j < 4; j++) {
        var tb = document.createElement("INPUT");
        var value = "", idNum = "";

        if (j == 0) {
            tb.setAttribute("type", "text");
            tb.value = value;

        }
        else {
            tb.setAttribute("type", "number");
        }


        //Setting textbox id
        switch (j) {
            case 0:
                idNum = "a";
                break;

            case 1:
                idNum = "v";
                break;

            case 2:
                idNum = "o";
                break;

            case 3:
                idNum = "t";
                break;

        }

        tb.id = idNum + (table.rows.length);

        if (tb.id.includes('t')) {
            tb.setAttribute("readOnly", "true");
        }

        tb.classList.add("assetTBox");
        let cell = row.insertCell(j);
        tb.addEventListener("input", assetTableEvent, false);
        cell.appendChild(tb);
     

    }
});

function assetTableEvent() {
    let total = 0;

    for (var k = 0; k <= document.getElementById("assetTable").rows.length; k++) {
        var a = document.getElementById("v" + k);
        var o = document.getElementById("o" + k);
        var t = document.getElementById("t" + k);

        if (a == null || o == null) {
            continue;
        }

        if (a.value.length > 0 && o.value.length > 0) {
            t.value = Number.parseInt(a.value - o.value);
            total = (Number.parseInt(t.value) + Number.parseInt(total));
            document.getElementById("totalAssets").value = Number.parseInt(total);
     }
  }
}