從jQuery中的表總輸入中獲取總數？

Question

我爲我的項目創建了一個簡單的股票儲蓄表。此外，我增加了一個按鈕來添加一行到我table.this是我的表，

      [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++; 

    }); 

總<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`