从 table 输入中获取总计作为 jquery 中的总计？

Question

我为我的项目创建了一个简单的库存节省 table。我还添加了一个按钮以将行添加到我的 table.this 是我的 table,

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

编辑

我添加了 html 代码 table,

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

这个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()); 
        });

但它只适用于第一行 table。如果我添加一个新行并尝试此代码。它不工作。我删除了 sum += parseFloat($(this).val()); 行并尝试了。仍然代码只在第一行工作。如何解决这个问题。谢谢

Answer 1

您的代码需要更正：

您只得到触发 'keyup' 事件的输入值，作为总和。但是您需要使用 class total 遍历所有输入并将所有输入的值相加以获得总计。
因为只有第一行是通过 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`
```

从 table 输入中获取总计作为 jquery 中的总计？

Get total from table input as grand total in jquery?

javascript

jquery

bootstrap-table