在动态创建的表上执行函数

Question

我正在使用 PHP 将 30 个烘焙项目从 mySQL 数据库检索到动态 HTML 表中。检索到的数据为产品、商品（主键）、重量和价格。我的代码还为每个项目创建一个名为数量的输入框，以便用户可以输入他想要的案例数。下面是用于生成动态表的代码段：

        $i=0;

    while ($i < $num) {
        $Item=mysql_result($result,$i,"Item");
        $Product=mysql_result($result,$i,"Product");
        $Weight=mysql_result($result,$i,"Weight");
        $BGPrice=mysql_result($result,$i,"BGPrice");

    echo "<tr>";
    echo "<td>$Product</td>";
    echo "<td><INPUT NAME=Item size=5 value=$Item READONLY></td>";
    echo "<td><INPUT NAME=Weight size=5 value=$Weight READONLY></td>";
    echo "<td><INPUT NAME=Price size=5 value=$BGPrice READONLY></td>";
    echo "<td><INPUT NAME=Quantity size=5 value=0 tabindex=$i></td>";
    echo "<td><INPUT NAME=ExtPrice size=5 value=0 READONLY></td>";
    echo "<td><INPUT NAME=TotalWt size=5 value=0 READONLY></td>";
    echo "</tr>";

    $i++;
    }

我需要 JavaScript 来调用函数并计算扩展价格 (ExtPrice) 和总重量 (TotalWt) 的值）一旦用户输入他想要订购的箱数。

这是我的挣扎：这个动态表中有 30 个项目，每个项目的 INPUT NAME 都是相同的。如何创建一个函数来更新每个产品的 ExtPrice 和 TotalWt？

Answer 1

您可以使用 $i 变量来唯一标识每个输入

echo "";

并且作为旁注，使用引号或双引号将 $Item 括起来，因为它可能包含空格等。

Answer 2

您的 JavaScript 不应直接按名称引用每个输入。相反，获取对同一行中相邻单元格的引用。

假设您有一个重新计算结果的提交按钮，下面是一个示例：

document.getElementById("sub").addEventListener("click", function(e) {
    var i, row;
    var rows = document.getElementsByTagName("tr");
    // process each row individually
    for (i = 0, row; row = rows[i++];) {
        totalsForRow(row);
    }
    e.preventDefault();
}, false);

// updates the totals for each row
function totalsForRow(tr) {
    var j, inp, fields = {};
    var inputs = tr.getElementsByTagName("input");
    if (!inputs || inputs.length === 0)
        return;
    // map each input by name
    for (j = 0; inp = inputs[j++];) {
        fields[inp.name] = inp;
    }
    // update totals for this row, using the stored ref to the input
    fields.TotalWt.value = fields.Weight.value * fields.Quantity.value;
    fields.ExtPrice.value = fields.Price.value * fields.Quantity.value;
}

这不会执行任何错误检查，并且可以通过多种方式进行改进。它只是为了说明一种方法。

请参阅工作示例。