從表輸入中獲取總計作為jquery中的總計？

Question

我為我的項目創建了一個簡單的庫存節省表。 我也添加了一個按鈕向表中添加行。這是我的表，

                            [add button]
+---------------+-----------+-----------+
+   lense type  +   qty     +   total   +
+---------------+-----------+-----------+
+               +           +           +
+---------------+-----------+-----------+
+               grand total : LKR       +
+---------------------------------------+

編輯

我添加了表格的html代碼，

<table class="table" id="tbl-add-lense">
            <thead style="background-color:#f5edff;">
            <th style="width:2%;"><input type="checkbox" name="chk_in" id="checkall"></input></th>
            <th style="width:2%;">item no</th>
            <th style="width:5%;">Lense Type</th>
            <th style="width:5%;">Unit price</th>
            <th style="width:5%;">Quantity</th>
            <th style="width:5%;">Total</th>
        </thead>
        <tbody id="tbl-lesne-body">
            <tr id="addr0">
                <td><input type="checkbox" name="chk_in"></input></td>
                <td>1</td> <td><input name='tb-lense-type1' type='text' placeholder='Lense Type' class='form-control '/> </td>
                <td><input  name='td-lunit1' type='number' placeholder='0'  class='form-control'></td>
                <td><input  name='td-lqty1' type='number' placeholder='0'  class='form-control'></td>
                <td><input  name='tb-ltotal1' type='number' placeholder='00.00'  class='form-control total'></td>

            </tr>

        </tbody>
        <tfooter></tfooter>
       </table>

該表有一行。 我使用添加按鈕添加了更多行。 添加行按鈕代碼，

$("#add-lense-row").click(function(){

      $("#tbl-lesne-body").append("<tr id='addr"+(i+1)+"'><td><input type='checkbox' name='chk_in'></input></td><td>"+ (i+1) +"</td> <td><input name='tb-lense-type"+i+"' type='text' placeholder='Lense Type' class='form-control '/> </td> <td><input  name='td-lunit"+i+"' type='number' placeholder='0'  class='form-control'></td><td><input  name='td-lqty"+i+"' type='number' placeholder='0'  class='form-control'></td><td class='tot'><input  name='td-ltotal"+i+"' type='number' placeholder='00.00' class='form-control total'></td></tr>");

      i++; 

   });

total <td>有一個input ，

<input  name='tb-ltotal1' type='number' placeholder='00.00'  class='form-control total'>

輸入輸入時，我需要獲取總td輸入的總和。 我嘗試了這段代碼，

 $(".total").keyup(function(){
            console.log('Typing');
            sum += parseFloat($(this).val()); 
        });

但它僅適用於表格的第一行。 如果我添加新行並嘗試此代碼。 沒用 我刪除了sum += parseFloat($(this).val()); 行並嘗試。 靜態代碼僅在第一行有效。 如何解決這個問題。 謝謝

Answer 1

您的代碼需要一些更正：

1. 您只獲得了觸發“ keyup”事件的輸入值的總和。 但是您需要遍歷所有具有類total輸入，並將所有值相加以獲得總計。

2. 由於只有第一行是通過html添加的，其余行是通過javascript / jquery動態添加的，因此常規事件綁定僅適用於第一行。 對於動態生成的元素，即第一次加載頁面時不存在的元素，您需要使用略有不同的語法進行事件綁定，例如$(document).on("keyup", ".total", function(){}) 。 通過以這種方式動態綁定事件，現在可以在所有輸入上觸發keyup事件。

    $(document).on("keyup", ".total", function(){ console.log('Typing'); var sum = 0; $(".total").each(function(index){ sum += parseFloat($(this).val()); });//each console.log( sum ); });//keyup`