0

phpを使用して、多次元配列に基づいてフォームを生成します。フォームには、「items [level1][level2][price]」および「items[level1][level2][amount]」という名前の入力type="text"フィールドペアがいくつか含まれています。これらを表に表示します。

ここで、jqueryを使用して2つのものを追加したいと思います。

  1. このアイテムの合計価格を表示する追加の列（= items [level1] [level2] [price] .value * items [level1] [level2] [amount] .value）
  2. 下の行：すべてのアイテムの合計価格。

これらの値は、言及されたテキスト入力の1つの変更イベントごとに更新される必要があります。

私はここ数時間壁にぶつかっています、私はここの誰かが私にいくつかの指針を与えることができることを願っています。

生成された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>
4

1 に答える 1

3

あなたがそれをすることができるいくつかの方法があります。基本的な考え方は、.classname入力が変更されたときに親行を探し、それを使用してその行の入力を探して乗算しtd、値を入力することです。[attr*=string]「namecontains」セレクターを使用してそれらを探すことができます。

$('.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/

マルコを編集：

$(".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.
});
于 2012-04-13T01:01:42.983 に答える