[英]Get total from table input as grand total in jquery?
我为我的项目创建了一个简单的库存节省表。 我也添加了一个按钮向表中添加行。这是我的表,
[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());
行并尝试。 静态代码仅在第一行有效。 如何解决这个问题。 谢谢
您的代码需要一些更正:
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`
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.