Javascript 如何自动对HTML表中每行的输入值框求和

我有一个HTML表格，其中有一列输入框（数量、价格、折扣和总额）。我制作了一个JS函数，可以根据需要添加任意多的行。我想使每行的“总计”列自动显示此公式的值：

（数量*价格）-（数量*价格*（折扣/100））

我尝试了很多JavaScript代码，但我一直无法让任何东西正常工作

HTML:

Q
-ty
价格，
$
折扣，
%
总计，$
（不含税）
添加行

Javascript:

function addRow() {
    var table = document.getElementById("myTable");
    var row = table.insertRow();
    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);
    cell1.innerHTML = "<input class=\"Left\" size=\"100\" type=\"text\" name=\"Description\">";
    cell2.innerHTML = "<div align=\"center\"><input type=\"number\" name=\"quantity\" min=\"1\" max=\"99\"></div>";
    cell3.innerHTML = "<div align=\"center\"><input type=\"number\" name=\"summ\"  min=\"0\" max=\"999999\"></div>";
    cell4.innerHTML = "<div align=\"center\"><input type=\"number\" name=\"rate\"  min=\"0\" max=\"100\"></div>";
    cell5.innerHTML = "<div align=\"center\"><input type=\"number\" name=\"total\" min=\"0\" max=\"99999999\"></div>";
}

函数addRow（）{
var table=document.getElementById（“myTable”）；
var row=table.insertRow（）；
var cell1=行插入单元格（0）；
var cell2=行插入单元格（1）；
var cell3=行插入单元格（2）；
var cell4=行插入单元格（3）；
var cell5=行插入单元格（4）；
cell1.innerHTML=“”；
cell2.innerHTML=“”；
cell3.innerHTML=“”；
cell4.innerHTML=“”；
cell5.innerHTML=“”；
}

---

没有什么不同的例子。我从js代码中删除了

div

函数计算（id）{
var row=id.parentNode.parentNode；
var quant=row.cells[1]。getElementsByTagName（'input'）[0]。值；
var price=row.cells[2]。getElementsByTagName（'input'）[0]。值；
var disc=row.cells[3]。getElementsByTagName（'input'）[0]。值；
如果（disc==null | | disc==''）{
res=parseFloat（数量）*parseFloat（价格）；
}否则{
var res=（parseFloat（quant）*parseFloat（price））-（parseFloat（quant）*parseFloat（price）*（parseFloat（disc）/100））；
}
行。单元格[4]。getElementsByTagName（'input'）[0]。value=res；
}
函数addRow（）{
var table=document.getElementById（“myTable”）；
var row=table.insertRow（）；
var cell1=行插入单元格（0）；
var cell2=行插入单元格（1）；
var cell3=行插入单元格（2）；
var cell4=行插入单元格（3）；
var cell5=行插入单元格（4）；
cell1.innerHTML=“”；
cell2.innerHTML=“”；
cell3.innerHTML=“”；
cell4.innerHTML=“”；
cell5.innerHTML=“”；
}

正文{
字体系列：“Calibri”；边距：0；}
#语调{
字体大小：粗体；
底部边框：2件纯黑；
}
.nr{
字体大小：粗体；
}
输入{
边界：无；
背景：透明；
文本对齐：居中；
}
表，th，td{
边框：1px纯黑；
边界塌陷：塌陷；
}
.左{
文本对齐：左对齐；
左边距：5px；
}

Q
-ty
价格，
$
折扣，
%
总计，$
（不含税）
为精心提问的问题添加行

+1。对于您的观点，我将首先向每个输入添加两个类。它们都有一个共同点，这样我就可以运行$（'.class1'）.blur（function（）{}）；以触发总数的更新。另一个实际上是每个输入一个，这样你就可以得到它的值来应用你的数学。这是假设您可以使用jQuery。您的问题是在输入更改时没有实现该公式，行add.jQuery被标记，但您正在使用它吗？这是你想要的吗

function addRow() {
    var table = document.getElementById("myTable");
    var row = table.insertRow();
    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);
    cell1.innerHTML = "<input class=\"Left\" size=\"100\" type=\"text\" name=\"Description\">";
    cell2.innerHTML = "<div align=\"center\"><input type=\"number\" name=\"quantity\" min=\"1\" max=\"99\"></div>";
    cell3.innerHTML = "<div align=\"center\"><input type=\"number\" name=\"summ\"  min=\"0\" max=\"999999\"></div>";
    cell4.innerHTML = "<div align=\"center\"><input type=\"number\" name=\"rate\"  min=\"0\" max=\"100\"></div>";
    cell5.innerHTML = "<div align=\"center\"><input type=\"number\" name=\"total\" min=\"0\" max=\"99999999\"></div>";
}