JQuery：在表单输入元素的多维数组上循环

使用php，我基于多维数组生成一个表单。该表单包含许多名为“项目[level1][level2][price]”和“项目[level1][level2][amount]”的输入type=“text”字段对。我把它们放在一张桌子上

现在，我想使用jquery添加两件事：

显示此项目总价的额外列（=项目[level1][level2][price].value*项目[level1][level2][amount].value）

最下面一行：所有项目的总价

这些值应在上述文本输入之一的每次更改事件中更新

过去几个小时我一直在碰壁，我希望这里的人能给我一些建议

以下是生成的html的一个片段：

<form name="formname">
<table name="tablename">
    <tr>
        <td><input type="text" class="classname" name="items[1][2][amount]" /></td>
        <td><input type="text" class="classname" name="items[1][2][price]" /></td>
        <td>Here I want to display amount*price</td>
    </tr>
    <tr>
        <td><input type="text" class="classname" name="items[1][8][amount]" /></td>
        <td><input type="text" class="classname" name="items[1][8][price]" /></td>
        <td>Here I want to display amount*price</td>
    </tr>
    <tr>
        <td><input type="text" class="classname" name="items[3][4][amount]" /></td>
        <td><input type="text" class="classname" name="items[3][4][price]" /></td>
        <td>Here I want to display amount*price</td>
    </tr>
    ...more rows like above...
    <tr>Some more formelements that have nothing to do with the problem</tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>Here I want to display the sum of all amount*price</td>
    </tr>
</table>
</form>

这里我想显示金额*价格
这里我想显示金额*价格
这里我想显示金额*价格
…更多像上面这样的行。。。
还有一些与问题无关的表单元素
这里我想显示所有金额*价格的总和

有几种方法可以做到这一点。基本思想是当

.classname

输入更改时，查找父行，然后使用父行查找该行中的输入以相乘，然后使用

td

将其值放在一起。您可以使用“名称包含”

[attr*=string]

选择器查找它们：

$('.classname').on('change', function() {
    var row = $(this).closest('tr');
    var total = row.find('[name*=amount]').val() * row.find('[name*=price]').val();

    row.find('td:last').text(total);
});

演示：

或者，如果它们总是第一列/第二列，请使用

.eq（）

或

：eq（）

：

演示：

编辑马可：

$(".classname").live('change', function(e) {
    //replaced on with live so the function will stick.
    var row = $(this).closest('tr');
    var total = row.find('[name*=amount]').val() * row.find('[name*=price]').val();
    row.find('[id="totalitemprice"]').text("\u20ac "+total.toFixed(2));
    //added eurosign and rounded to 2 decimals

    //Start computing total value
    var totaltotal = parseFloat(0);
    $.each($('[id="totalitemprice"]'), function(key, value) {
        //Loop across all totalitemprices
        totaltotal += parseFloat(value.firstChild.data.replace(/\u20ac /g,''));
        //Find out what's in the cell, strip the eurosign, parse it to Float and add it to the total
    });

    $("#totalprice").text("\u20ac "+totaltotal.toFixed(2));
    //Finally, write the total price to the approprioate cell.
});

---

有几种方法可以做到这一点。基本思想是当

.classname

输入更改时，查找父行，然后使用父行查找该行中的输入以相乘，然后使用

td

将其值放在一起。您可以使用“名称包含”

[attr*=string]

选择器查找它们：

$('.classname').on('change', function() {
    var row = $(this).closest('tr');
    var total = row.find('[name*=amount]').val() * row.find('[name*=price]').val();

    row.find('td:last').text(total);
});

演示：

或者，如果它们总是第一列/第二列，请使用

.eq（）

或

：eq（）

：

演示：

编辑马可：

$(".classname").live('change', function(e) {
    //replaced on with live so the function will stick.
    var row = $(this).closest('tr');
    var total = row.find('[name*=amount]').val() * row.find('[name*=price]').val();
    row.find('[id="totalitemprice"]').text("\u20ac "+total.toFixed(2));
    //added eurosign and rounded to 2 decimals

    //Start computing total value
    var totaltotal = parseFloat(0);
    $.each($('[id="totalitemprice"]'), function(key, value) {
        //Loop across all totalitemprices
        totaltotal += parseFloat(value.firstChild.data.replace(/\u20ac /g,''));
        //Find out what's in the cell, strip the eurosign, parse it to Float and add it to the total
    });

    $("#totalprice").text("\u20ac "+totaltotal.toFixed(2));
    //Finally, write the total price to the approprioate cell.
});

---

你能发布你的jQuery代码吗？你能发布你的jQuery代码吗？非常感谢Jeff！这给了我一个正确的方向，也许足够：）太好了！当你使用某人的答案时，礼貌地向上投票和/或接受答案（单击问题旁边数字下方的复选标记）。当你是一个新用户时，你可能无法提高投票率，但你总是可以接受你提出的问题的答案。我明白了，杰夫，但我想等到我100%确信它会解决我的问题。我接受了答案，并向其中添加了我的最终jquery代码。同时也感谢JSFIDLE链接——我不知道这一点，而且它非常棒@马可，很高兴这有帮助。请注意，

on（）

取代了jQuery新版本中的

live（）

。要使

on（）

“粘住”，正如您所说，您需要在任何父元素上调用它，并使用类名对其进行过滤：

$（'tr'）。在（'click'，'.classname'，function（）{…

。这将与您的

live

调用一样。非常感谢Jeff！这让我朝着正确的方向前进了一步，可能足够了：）太好了！当你使用某人的答案时，礼貌地向上投票和/或接受答案（单击问题旁边数字下方的复选标记）。当您是新用户时，您可能无法投票，但您始终可以接受您提出的问题的答案。我得到了Jeff，但我想等到我100%确定它能解决我的问题。我接受了答案，并向其添加了我的最终jquery代码。同时感谢jsFiddle链接-我不知道，而且它非常棒！@Marco，很高兴它能帮上忙d、 需要注意的是，

on（）

在较新版本的jQuery中取代了

live（）

。要使

on（）

像您所说的那样“粘住”，您需要在任何父元素上调用它，并使用类名：

$（'tr'）。on（'click'，'classname'，function（）{…

。这将与您的

live

调用一样。