2

問題の解決策を見つけるために (さまざまな解決策を組み合わせようとして) Stackoverlfow に 20 時間以上費やしましたが、まだ行き詰まっており、間違いなくあなたの助けが必要です!

基本的に、3 つの「金額」入力フィールドと「合計金額」フィールド (3 つの金額の合計) を持つ単純なフォームがあります。

HTMLコードは次のとおりです。

<table border="1">

    <tr>
        <td>Amount 1</td>
        <td><input class="amount" type="text"/></td>
    </tr>

     <tr>
        <td>Amount 2</td>
        <td><input class="amount" type="text"/></td>
    </tr>

    <tr>
        <td>Amount 3</td>
        <td><input class="amount" type="text"/></td>
    </tr>

    <tr>
        <td>Total Amount</td>
        <td><span class="total">0</span></td>
    </tr>

</table>

次に、作業用の JQuery コード:

$(document).ready(function(){           
        $('input').each(function() {
            $(this).keyup(function(){   
                calculateTotal();
            });
        });
    });

    function calculateTotal() {
        var sum = 0;
        $('input').each(function() {
            if(!isNaN(this.value) && this.value.length!=0) {
                sum += parseFloat(this.value);
            }
        });

        $(".total").html(sum.toFixed(2));
    }

ただし、同じページ内で同じフォームの複数のインスタンスを使用したいのですが、現在のような「一般的な」JQuery関数を1つだけ持たせようとしています。これは、同じページであっても、混合せずに任意のフォームで機能しますフォーム間のフィールド。

基本的には「入力欄が更新されるたびに合計金額を再計算し、CURRENTフォーム・テーブルの合計欄に入れる」という機能

私はさまざまな方法を試しました。特に、テーブルを " で囲み、<div>" で見つけてからcurrentdiv = $(this).prev("div");"、 each 関数を使用して "現在の div" をループします。を使用せずに、次のようなことも試しました<div>。

$(this).closest('tr').next().find('span.total').html(sum.toFixed(2));
or
$(this).closest('span.total').html(sum.toFixed(2));
or even
$(this).closest('span').prevAll('.total:first').html(sum.toFixed(2));

よろしくお願いします。

4

5 に答える 5

4

一般的に、コードを少しオーバーホールします。jQuery では、リスナーをアタッチするために、一致したすべての要素を反復処理する必要はありません。これで十分です：

$(document).ready(function(){           
    $('input.amount').keyup(function(){   
        calculateTotal(this);
    });
});

function calculateTotal( src ) {
    var sum = 0,
        tbl = $(src).closest('table');
    tbl.find('input.amount').each(function( index, elem ) {
        var val = parseFloat($(elem).val());
        if( !isNaN( val ) ) {
            sum += val;
        }
    });
    tbl.find('input.total').html(sum.toFixed(2));
}

イベントハンドラーのキーワードは、 .eachハンドラーのパラメーターとthis同じように、jQueryでラップされていないことに注意してください。elem

于 2012-08-05T08:39:29.197 に答える
1

すべての要素を含む table 要素を渡すだけではどうですか。

calculateTotal(this.parent('table'));//I would set a class on table personally and you need to test this;

そして、正しい入力とスパンのみを取得するために使用できる参照があります。

function calculateTotal(el) {
    var sum = 0;
    $(el).find('input').each(function() {
        if(!isNaN(this.value) && this.value.length!=0) {
            sum += parseFloat(this.value);
        }
    });

    $(el).find(".total").html(sum.toFixed(2));
}
于 2012-08-05T08:22:21.150 に答える
0

これは仕事をします：

$(document).ready(function(){           
        $('input').each(function() {
            $(this).keyup(function(){   
                calculateTotal($(this).closest('table'));
            });
        });
    });

    function calculateTotal($tab) {
        var sum = 0;
        $tab.find('input').each(function() {
            if(!isNaN(this.value) && this.value.length!=0) {
                sum += parseFloat(this.value);
            }
        });
        $tab.find(".total").html(sum.toFixed(2));
    }
});
于 2012-08-05T08:35:07.963 に答える
0

そのjsFiddle pageで動作する純粋な jQuery ソリューションを取得しました。フィールドを更新するたびに、マークアップを使用して各テーブルの合計を見つけます。

$("input.amount")
  .keyup(function() {
    total = 0;
    $(this)
      .parents("table")
      .find("input.amount")
        .each(function() {
            total += parseInt($(this).val());
        })
      .end()
      .find("span.total")
      .html(total);
  });​
于 2012-08-05T08:36:15.740 に答える