jquery - JQuery：循环表单输入元素的多维数组

Question

使用 php，我生成了一个基于多维数组的表单。该表单包含许多名为“items[level1][level2][price]”和“items[level1][level2][amount]”的输入 type="text" 字段对。我将这些显示在表格中。

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

1. 显示此商品总价的额外列 (=items[level1][level2][price].value * items[level1][level2][amount].value)
2. 在底行：所有商品的总价。

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

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

这是生成的 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>

Answer 1

有几种方法可以做到。基本思想是当.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);
});

演示：http: //jsfiddle.net/jtbowden/DJtTs/

或者，如果它们始终是第一/第二列，请使用.eq()or :eq()：

$('.classname').on('change', function() {
    var row = $(this).closest('tr');
    var total = row.find('input:eq(0)').val() * row.find('input:eq(1)').val();

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

演示：http: //jsfiddle.net/jtbowden/DJtTs/1/

编辑马可：

$(".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.
});