javascript - 总结 texboxes 列并使用 JavaScript 在文本框中显示
问题描述
问题:
我必须在网格中显示金额文本框的总和,并在“账单金额”文本框中显示总数,但我得到的只是 0。我附上了屏幕截图以便更好地理解。
截屏:
源代码:
html代码:
$(document).on('keydown', 'input', function() {
$('.Qty').on("input change", function() {
var price = 0;
var total = 0;
$('.tb3 tr').each(function() {
var qty = $(this).find('.Qty').val();
var rate = $(this).find('.Rate').val();
var price = qty * rate;
$(this).find('.Value').val(price);
total = total + price;
});
$('.TieTotal').val(total.toFixed(2));
});
$('.Value').on(function() {
$('.tb3 tr').each(function() {});
$('.TieTotal').val(total.toFixed(2));
});
});
<table>
<tbody>
<tr>
<td>
<a href='javascript:void(0);' class='remove3'>
<span class='glyphicon glyphicon-remove'></span>
</a>
</td>
<td>
<input type="text" class="Product_Code" name="Prdtcode[]" class="form-control input-
xs Product_Code " required>
</td>
<td>
<input type="text" class="Product_Name" name="Prdtname[]" class="form-
control input-xs">
</td>
<td>
<input type="text" class="Qty" name="Qty[]" class="form-control input-xs" required>
</td>
<td>
<input type="text" class="Rate" class="form-control input-
xs" name="Rate[]" value="">
</td>
<td>
<input type="text" class="Value" class="form-control input-
xs" name="amount[]" value="">
</td>
</tr>
<tr>
<td>
<a href='javascript:void(0);' class='remove3'>
<span class='glyphicon glyphicon-remove'></span>
</a>
</td>
<td>
<input type="text" class="Product_Code" name="Prdtcode[]" class="form-control input-
xs Product_Code " required>
</td>
<td>
<input type="text" class="Product_Name" name="Prdtname[]" class="form-
control input-xs">
</td>
<td>
<input type="text" class="Qty" name="Qty[]" class="form-control input-xs" required>
</td>
<td>
<input type="text" class="Rate" class="form-control input-
xs" name="Rate[]" value="">
</td>
<td>
<input type="text" class="Value" class="form-control input-
xs" name="amount[]" value="">
</td>
</tr>
<tr>
<td>
<a href='javascript:void(0);' class='remove3'>
<span class='glyphicon glyphicon-remove'></span>
</a>
</td>
<td>
<input type="text" class="Product_Code" name="Prdtcode[]" class="form-control input-
xs Product_Code " required>
</td>
<td>
<input type="text" class="Product_Name" name="Prdtname[]" class="form-
control input-xs">
</td>
<td>
<input type="text" class="Qty" name="Qty[]" class="form-control input-xs" required>
</td>
<td>
<input type="text" class="Rate" class="form-control input-
xs" name="Rate[]" value="">
</td>
<td>
<input type="text" class="Value" class="form-control input-
xs" name="amount[]" value="">
</td>
</tr>
</tbody>
</table>
<div class="form-group ">
<label class="col-md-4 control-label">BILL TOTAL:</label>
<div class="col-md-4">
<input type="text" placeholder="Amount" class="form-control
input-xs" name="tot" class="TieTotal" value="">
</div>
我不知道需要进行哪些更改才能解决此问题,请帮助我。
解决方案
1)您的每个输入都有 2 类确保访问您的“tr td 输入”。
2)如果您需要对代码进行任何更改,请询问
//script
$(document).on('change', 'tr td:nth-child(6), tr td:nth-child(5), tr td:nth-child(4)', function(){
var total = 0;
var tr = $(this).parent();
var qty = tr.find('td:nth-child(4)').find('input').val();
var rate = tr.find('td:nth-child(5)').find('input').val();
var amount = qty*rate;
tr.find('td:nth-child(6)').find('input').val(amount);
var tbody = tr.parent();
$(tbody).find('tr').each(function(){
total += Number($(this).find('td:nth-child(6)').find('input').val());
});
$('.TieTotal').val(total);
})
推荐阅读
- ios - 使用 Firebase 进行 iOS 开发时如何修复致命错误?
- java - IBM Websphere 8.5.5 在 Servlet 3.0 中使用数据源 4.0 版本
- linq - 使用 EF 核心包含时排除已删除的子项
- git - Git 格式补丁不显示在 Jenkins 控制台中
- apache-spark - 根据 Pyspark 中的列将 RDD 拆分为两个 RDD
- ionic-framework - 在ionic4中旋转时如何解决自动播放问题?
- json - OSError: [Errno 22] Invalid argument : 在 Python 中加载一个大的 json 文件
- javascript - 如何为 Ant design vue 编写上传组件的 customRequest
- flutter - Dialogflow 机器人没有响应
- java - XML 外部实体引用的不当限制