Javascript 脚本不'；动态添加行后无法工作

我有一个计算总金额的函数。 金额=数量*费率

这是我用来显示表格的html代码

当我添加新行时，它不会触发计算函数

有人能帮我吗

这是我的剧本：

函数计算（）{
var myBox1=document.getElementById（'qty'）.value；
var myBox2=document.getElementById（'rate'）。值；
var amnt=document.getElementById（'amnt'）；
var myResult=myBox1*myBox2；
amnt.value=myResult；
}
var count=“1”；
函数addRow（在名称中）
{
var tbody=document.getElementById（在名称中）.getElementsByTagName（“tbody”）[0]；
//创建行
var行=document.createElement（“TR”）；
//创建表单元格1
var td1=document.createElement（“TD”）
var strHtml1=“”；
td1.innerHTML=strHtml1.replace（/！count！/g，count）；
//创建表格单元格2
var td2=document.createElement（“TD”）
var strHtml2=“”；
td2.innerHTML=strHtml2.replace（/！count！/g，count）；
//创建表格单元格3
var td3=document.createElement（“TD”）
var strHtml3=“”；
td3.innerHTML=strHtml3.replace（/！count！/g，count）；
//创建表格单元格4
var td4=document.createElement（“TD”）
var strHtml4=“”；
td4.innerHTML=strHtml4.replace（/！count！/g，count）；
//创建表格单元格5
var td5=document.createElement（“TD”）
var strHtml5=“”；
td5.innerHTML=strHtml5.replace（/！count！/g，count）；
//创建表格单元格4
var td6=document.createElement（“TD”）
var strHtml6=“”；
td6.innerHTML=strHtml6.replace（/！count！/g，count）；
//将数据追加到行
第3行。追加子项（td1）；
第3行。追加子项（td2）；
第3行：追加子项（td3）；
第3行。追加子项（td4）；
第3行。追加子项（td5）；
第3行。追加子项（td6）；
//添加到计数变量
count=parseInt（count）+1；
//将行追加到表中
tbody.appendChild（世界其他地区）；
}
函数delRow（）
{
var current=window.event.src元素；
//这里我们将删除该行
而（（current=current.parentElement）&¤t.tagName！=“TR”）；
current.parentElement.removeChild（当前）；
}

行物料名称
描述
数量。
比率
数量

我现在明白你想做什么了

您多次使用同一元素

id

，因此

calculate（）

函数始终只选择第一行中的第一个输入

I

calculate（）

因此它将触发事件的元素作为参数，然后向上遍历DOM树以查找最近的

：

然后选择此表行中的“仅输入字段”，计算所需内容并将其设置为同一行中另一个输入字段的值

我最后更改的是，我使用

oninput=calculate（this）

触发

oninput

，其中

this

是当前DOM元素

函数计算（elm）{
var tr=elm；
while（（tr=tr.parentElement）&&tr.tagName！='tr'）；
var inputs=tr.querySelectorAll（“输入”）；
var myBox1=输入[2]。值；
var myBox2=输入[3]。值；
var myResult=myBox1*myBox2；
输入[4]。值=myResult；
}
var count=“1”；
函数addRow（在名称中）
{
var tbody=document.getElementById（在名称中）.getElementsByTagName（“tbody”）[0]；
//创建行
var行=document.createElement（“TR”）；
//创建表单元格1
var td1=document.createElement（“TD”）
var strHtml1=“”；
td1.innerHTML=strHtml1.replace（/！count！/g，count）；
//创建表格单元格2
var td2=document.createElement（“TD”）
var strHtml2=“”；
td2.innerHTML=strHtml2.replace（/！count！/g，count）；
//创建表格单元格3
var td3=document.createElement（“TD”）
var strHtml3=“”；
td3.innerHTML=strHtml3.replace（/！count！/g，count）；
//创建表格单元格4
var td4=document.createElement（“TD”）
var strHtml4=“”；
td4.innerHTML=strHtml4.replace（/！count！/g，count）；
//创建表格单元格5
var td5=document.createElement（“TD”）
var strHtml5=“”；
td5.innerHTML=strHtml5.replace（/！count！/g，count）；
//创建表格单元格4
var td6=document.createElement（“TD”）
var strHtml6=“”；
td6.innerHTML=strHtml6.replace（/！count！/g，count）；
//将数据追加到行
第3行。追加子项（td1）；
第3行。追加子项（td2）；
第3行：追加子项（td3）；
第3行。追加子项（td4）；
第3行。追加子项（td5）；
第3行。追加子项（td6）；
//添加到计数变量
count=parseInt（count）+1；
//将行追加到表中
tbody.appendChild（世界其他地区）；
}
函数delRow（）
{
var current=window.event.src元素；
//这里我们将删除该行
而（（current=current.parentElement）&¤t.tagName！=“TR”）；
current.parentElement.removeChild（当前）；
}

行物料名称
描述
数量。
比率
数量

您仅在

oninput

事件中调用

calculate（）

，而不是直接在

addRow（）中调用
function@Martin你能给我详细的解决方案吗？你能给我一个脚本来定义Select的html元素吗
var tr = elm;
while ((tr = tr.parentElement) && tr.tagName !== 'TR');