Question

使用php我生成一个基于多维数组的表单。表单包含许多输入类型=“文本”字段对，名为“items [level1] [level2] [price]”和“items [level1] [level2] [amount]”。我在桌子上显示这些。

现在，我想使用jquery添加两个东西：

显示此商品总价的额外列（=商品[level1] [level2] [price] .value * items [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>

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/

如果它们始终是第1列/第2列，请使用.eq()或: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/

编辑MARCO：

$(".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：循环遍历表单输入元素的多维数组

1 个答案: