1

個々の行の入力を乗算して各行の合計価格を計算し、最後に JQuery を使用して Total 列のすべての合計値を加算して総計を計算したいと考えています。値を入力すると、最初の行だけに合計が表示されます。どんな助けでも大歓迎です。 

     <script type="text/C#" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript">
         $(document).ready(function () {
            $(".txtMult").each(function () {
                $(this).keyup(function () {
                    multInputs();
                });
            });
           });

           function multInputs() {
               var mult = 0;
               $(".txtMult").each(function () {
                   var $val1 = $('#val1').val();
                   var $val2 = $('#val2').val();
                   var $total = ($val1 * 1) * ($val2 * 1)
                   $('#multTotal').text($total);
               });
           }

    </script>
    @using (@Html.BeginForm())
    {
        <table>
        <tr>
            <th>
                Quanity
            </th>
            <th>
                Unit Price
            </th>
            <th>
                Total
            </th>
        </tr>
        @for (int i=0; i < 5; i++)
        {

            <tr>
                <td>
                    <input class ="txtMult" name="txtEmmail" id="val1"  />
                </td>
                <td>
                    <input class ="txtMult" name="txtEmmail" id="val2"/>
                </td>
                <td>
                    <span id="multTotal">0.00</span>
                </td>
            </tr>

    }
<tr>
    <td colspan="3" align="right">
        Grand Total# <span id="grandTotal">0.00</span>
    </td>
</tr>
    </table> 
    }

ここに画像の説明を入力

4

2 に答える 2

8

HTML が無効です。id属性は一意であるはずですが、すべての行で同じ 3 つの ID を繰り返しています。これを修正する最も簡単な方法は、入力をclass="val1"andclass="val2"ではなくid="val1"and`id="val2"に変更し、行の合計を have に変更することclass="multTotal"です。txtMultまた、これらの行を簡単に選択できるように、入力を含む各 tr 要素にクラスを移動します。

        <tr class="txtMult">
            <td>
                <input name="txtEmmail" class="val1"  />
            </td>
            <td>
                <input name="txtEmmail" class="val2"/>
            </td>
            <td>
                <span class="multTotal">0.00</span>
            </td>
        </tr>

...そして、jQuery コードのセレクターを変更して、現在の行のコンテキストでクラスごとに選択します。セレクターに一致する要素にハンドラーを.each()バインドするためのループは必要ないことにも注意してください。.keyup()$("someselector").keyup()

 $(document).ready(function () {
       $(".txtMult input").keyup(multInputs);

       function multInputs() {
           var mult = 0;
           // for each row:
           $("tr.txtMult").each(function () {
               // get the values from this row:
               var $val1 = $('.val1', this).val();
               var $val2 = $('.val2', this).val();
               var $total = ($val1 * 1) * ($val2 * 1);
               // set total for the row
               $('.multTotal', this).text($total);
               mult += $total;
           });
           $("#grandTotal").text(mult);
       }
  });

実際のデモ: http://jsfiddle.net/nnnnnn/5FpWC/

于 2012-08-03T05:29:02.213 に答える
1

inテーブルにクラスを追加しましょう。

最初に、テーブルのすべての入力に変更イベントを追加します。入力フィールドの変更時に、同じ行のすべての入力を乗算し、and を更新しますmultTotal。grandTotal

$(function(){
            $('.in input').change(function(){
                var p=$(this).parent().parent() //get the parent of changed input
                var m=p.find('input.txtMult') //find all input of the row
                var mul=parseFloat($(m[0]).val()*$(m[1]).val()).toFixed(2) //multiply them
                var res=p.find('.multTotal') // get corresponding multTotal
                res.html(mul); //show the result
                var total=0;
                $('.in .multTotal').each(function(){
                    total+=parseFloat($(this).html())
                }) //calculate grand total
                $('.in #grandTotal').html(parseFloat(total).toFixed(2)) //show grand total
            });
        })

jsfiddleでこれを確認してください

2 つ以上のフィールド変更を処理する必要がある場合

var mul=parseFloat($(m[0]).val()*$(m[1]).val()).toFixed(2) //multiply them

に

var mul=1;
$(m).each(function(){
  mul*=$(this).val()
})
mul=parseFloat(mul).toFixed(2)
于 2012-08-03T05:55:52.387 に答える