在动态创建的表上执行功能答案

【问题标题】：Performing Functions on a Dynamically Created Table在动态创建的表上执行功能
【发布时间】：2011-07-03 01:57:31
【问题描述】：

我正在使用 PHP 从一个 mySQL 数据库中检索 30 个面包店项目到一个动态 HTML 表中。检索到的数据是 Product、Item（主键）、Weight 和 Price。我的代码还为每个项目创建了一个名为 Quantity 的 INPUT 框，以便用户可以输入他想要多少个案例。下面是用于生成动态表的一段代码：

        $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？

【问题讨论】：

标签： javascript dynamic-tables

【解决方案1】：

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

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

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;
}

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

查看working example。

【讨论】：

【解决方案2】：

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

echo "<td><INPUT NAME=Item id='item$i' size=5 value='$Item' READONLY></td>";

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

【讨论】：