-1

ボタンのクリックでテーブル行を動的に追加するフォームがあります。これまでのところすべて正常に動作していますが、次のように名前が付けられた 2 つのフィールドを計算する必要がunitありrate 、計算は次のようunit*rate = amountになり、金額の値は合計金額フィールドに表示されるはずです。簡単な計算は知っていますが、動的に追加された行でこれを行う方法がわかりません。誰でも私を助けることができますか？

これは、新しい行を追加するスクリプトです。

                    <script src="http://code.jquery.com/jquery-latest.js"></script>
        <script type='text/javascript'>
        //<![CDATA[
  $(document).ready(function() {
          var currentItem = $('#items').val();
                $('#addnew').click(function() {
                    currentItem++;
                    $('#items').val(currentItem);
                    //var strToAdd = ;
                     $('#data').append('<tr><td align="center"><input type="text" size="6" maxlength="6" id="ord" maxlength="6" name="ord_' + currentItem + '" class="form-input-oth" onkeyup="return copy(this.val());"/></td>\n\
                                        <td align="center"><input type="text" size="6" maxlength="6" id="srno" maxlength="6" name="srno_' + currentItem + '" class="form-input-oth"/></td>\n\
                                        <td align="center"><textarea name="descrip_' + currentItem + '" id="descrip" cols="70" class="form-input-textarea"></textarea></td>\n\
                                        <td align="center"><input type="text" size="6" maxlength="9" id="unit" maxlength="6" name="unit_' + currentItem + '" class="form-input-rate"/></td>\n\
                                        <td align="center"><input type="text" size="6" maxlength="9" id="prevqty" maxlength="6" name="unit_' + currentItem + '" class="form-input-rate"/></td>\n\
                                        <td align="center"><input type="text" size="6" maxlength="9" id="thisqty" maxlength="6" name="unit_' + currentItem + '" class="form-input-rate"/></td>\n\
                                        <td align="center"><input type="text" size="6" maxlength="9" id="qty" maxlength="6" name="unit_' + currentItem + '" class="qty form-input-rate"  onkeyup="calculateRow();"/></td>\n\
                                        <td align="center"><input type="text" size="6" maxlength="9" id="rate" maxlength="6" name="rate_' + currentItem + '" class="rate form-input-rate"  onkeyup="calculateRow();"/></td>\n\
                                        <td align="center"><input type="text" size="6" maxlength="9" id="amt" maxlength="6" name="amt_' + currentItem + '" class="cal form-input-rate"  onkeyup="calculateRow();"/></td>\n\
                                        </tr>');

                });
            });
   //]]>
     </script>

ここに私の計算コードがありますが、新しい行を追加すると機能しないようです

function calculateSum() {

    var sum = 0;
    $(".cal").each(function () {
        if (!isNaN(this.value) && this.value.length != 0) {
            sum += parseFloat(this.value);
        }
    });
    $("#total").val(sum.toFixed(2));
}

function calculateRow() {

    $('.qty, .rate').keyup(function () {
        var cost = 0;
        var $row = $(this).closest("tr");
        var qty = parseFloat($row.find('.qty').val());
        var rate = parseFloat($(".rate").val())
        cost = qty * rate;
           //  alert($("#rate").val());

        if (isNaN(cost)) {
            $row.find('.cal').val("0");
        } else {
            $row.find('.cal').val(cost);
        }
        calculateSum();
    })
}
        </script>
4

1 に答える 1

0

コードにはいくつか問題があります。まず、入力要素の ID 属性がページの各行で繰り返されます。これは無効な HTML です。ページ上のすべての ID は一意である必要があります。

onkeyup次に、を呼び出す単位、率、合計入力にイベントを追加し、calculateRow別のイベントを入力に再バインドkeyupします。したがって、キーを押すたびに、関数を何度もバインドしています。これを試して：

function calculateRow() {
    var cost = 0;
    var $row = $(this).closest("tr");
    var qty = parseFloat($row.find('.qty').val());

    // changed the following line to only look within the current row
    var rate = parseFloat($row.find('.rate').val());

    cost = qty * rate;

    if (isNaN(cost)) {
        $row.find('.cal').val("0");
    } else {
        $row.find('.cal').val(cost);
    }
    calculateSum();
}

アップデート：

また、インラインonkeydownイベント バインディングを削除して上に移動します。

$('#data').on('keyup', '.qty, .rate, .cal', calculateRow);

これにより、イベントが要素にバインドされ、#data一致する要素がイベント.qty, .rate, .calを#dataトリガーした場合にのみ、イベント リスナーが呼び出されます。したがって、要素を削除しない限り、これは動的に追加された要素に対しても機能します#data。

于 2013-04-11T15:23:06.437 に答える