Question

我正在使用PHP从mySQL数据库中检索30个面包项到动态HTML表中。检索到的数据包括产品，商品（主键），重量和价格。我的代码还为每个项目创建了一个名为数量的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 的功能？

Answer 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。

Answer 2

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

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

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

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

2 个答案: