Javascript Java脚本函数在第二个循环中不工作

当页面加载时，循环开始，java脚本函数也在第一行循环中工作，但在第二行循环中它不工作，乘法不工作，您可以在pic中看到（单价*数量=总价）

foreach（$db->getRecordSet（$sqlTrRecord）作为$row）{$counter+=1；？>
不能为多个元素提供相同的ID。这是无效的HTML。如果这样做，
getElementById
通常会返回第一个元素（但它可以执行任何操作，包括不返回任何元素，因为它同样无效）

在您的情况下，实现此功能所需的最小更改是：

删除行中的所有
id
s，您不需要它们。将
名称保留在
输入上

将
此
传递到
总计
您调用它的任何位置，以便它知道在哪个元素上出现了
键控
，例如：

<input type="number" class="form-control" name="quantity" onKeyUp="total(this)" autocomplete="off" />
<!-- --------------------------------------------------------------------^^^^       -->

这是通过查找包含发生事件的元素的行，然后使用CSS选择器查找该行中的各种
输入

请注意，它使用了，这是相当新的。为了避免使用它，您可以替换

var row = element.closest("tr");

与


以下是一些旁注：


keyup
不是用于更新总计字段的可靠事件，因为如果用户通过鼠标更新字段（例如，右键单击并从上下文菜单中选择粘贴），则不会触发该事件。我建议使用该事件
使用
onxyz
-属性样式的事件处理程序不是最佳做法，尤其是因为它们只能调用全局函数（或元素上的方法，包含表单（如果有的话））等。相反，您可以使用表上注册的事件处理程序，并使用事件对象的
target
来了解事件的目标元素（以及要处理的行）。这是可能的，因为
input
和两者都是气泡
您不能为多个元素提供相同的ID。欢迎使用Stack Overflow！请阅读，四处看看，并通读，特别是在发布纯粹关于客户端技术（例如，在DOM上运行的JavaScript）的问题时，发布浏览器看到的内容，而不是生成浏览器看到内容的服务器端代码。更多信息：现在它对我有效。但是当页面刷新时，总数中的值和数量都消失了，然后你应该输入数量以获得总值。@SikandarKhan:这将是一个不相关的问题：如果你想填写它们，你需要将输入默认数量，并对所有行进行初始合计。
function total(element) {
    var row = element.closest("tr");
    var unitRate = row.querySelector("input[name=unit_rate]");
    var qty = row.querySelector("input[name=quantity]");

    // (Note you're relying on implicit coercion from string to number here)
    var total = unitRate.value * qty.value;

    row.querySelector("input[name=total_price]").value = total;
}

var row = element.closest("tr");

var row = element;
while (row && row.tagName !== "TR") {
    row = row.parentNode;
}