javascript - 表小计和总计不计算
问题描述
我有一个包含表头和动态行添加的表。
我想计算小计和总计。我成功创建了添加行。当我尝试输入数据时,未显示总数
我试过这样但它不起作用
$(document).ready(function() {
addRow();
var $tblrows = $("#detailTable tbody tr");
$tblrows.each(function(index) {
var $tblrow = $(this);
$tblrow.find('.Qty').on('change', function() {
var qty = $tblrow.find("[name=Qty]").val();
var price = $tblrow.find("[name=Price]").val();
var subTotal = parseInt(qty, 10) * parseFloat(price);
// alert("line1");
if (!isNaN(subTotal)) {
// alert("line2");
$tblrow.find('.total').val(subTotal.toFixed(2));
var grandTotal = 0;
// alert("alert subtotal");
$(".total").each(function() {
var stval = parseFloat($(this).val());
grandTotal += isNaN(stval) ? 0 : stval;
});
$('.grdtot').val(grandTotal.toFixed(2));
}
});
});
$("#detailTable input").focus(function() {
$(this).parent().addClass("highlighted");
});
});
function addRow() {
var rowCount = $("#detailTable>tbody>tr").length;
$("#detailTable>tbody").append('<tr><td><input name="ProductName" required></td><td><input name="Qty" class="Qty" required></td><td><input name="Price" required></td><td><input name="total" required></td><td><a onclick="deleteRow(' + rowCount + ')">Delete</a></td></tr>')
$("tr:odd").css("background-color", "#ccc");
}
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<table class="table table-striped" id="detailTable">
<thead>
<tr>
<div class="col-sm-2">
<th>ProductName</th>
</div>
<div class="col-sm-2">
<th>Qty</th>
</div>
<div class="col-sm-2">
<th>Price</th>
</div>
<div class="col-sm-2">
<th>Total</th>
</div>
<div class="col-sm-2">
<th><button type="button" onclick="addRow()" class="btn btn-info">Add Row</button></th>
</div>
</tr>
</thead>
<tbody></tbody>
<tfoot>
<tr>
<td></td>
<td></td>
<td></td>
<td><input type="text" class="grdtot" value="" name="" /></td>
</tr>
</tfoot>
</table>
解决方案
几个问题。
这是使用委托的解决方案,我修复了您缺少的总类并将总计更改为 ID 并删除了内联删除
$(document).ready(function() {
addRow();
$("#detailTable").on("input","tbody>tr input", function() {
$("#detailTable tbody>tr").each(function(index) {
var $tblrow = $(this);
var qty = $tblrow.find("[name=Qty]").val();
var price = $tblrow.find("[name=Price]").val();
var subTotal = parseInt(qty, 10) * parseFloat(price);
if (!isNaN(subTotal)) {
$tblrow.find('.total').val(subTotal.toFixed(2));
var grandTotal = 0;
$(".total").each(function() {
var stval = parseFloat($(this).val());
grandTotal += isNaN(stval) ? 0 : stval;
});
$('#grdtot').val(grandTotal.toFixed(2));
}
});
});
$("#detailTable").on("click",".del",function(e) {
e.preventDefault();
$(this).closest("tr").remove();
})
$("#detailTable").on("focus","input", function() {
$(this).closest("td").addClass("highlighted");
});
});
function addRow() {
var rowCount = $("#detailTable>tbody>tr").length;
$("#detailTable>tbody").append('<tr><td><input name="ProductName" required></td><td><input name="Qty" class="Qty" required></td><td><input name="Price" required></td><td><input class="total" name="total" readonly></td><td><a class="del" href="#">Delete</a></td></tr>')
$("tr:odd").css("background-color", "#ccc");
}
.highlighted { background-color: green }
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<table class="table table-striped" id="detailTable">
<thead>
<tr>
<div class="col-sm-2">
<th>ProductName</th>
</div>
<div class="col-sm-2">
<th>Qty</th>
</div>
<div class="col-sm-2">
<th>Price</th>
</div>
<div class="col-sm-2">
<th>Total</th>
</div>
<div class="col-sm-2">
<th><button type="button" onclick="addRow()" class="btn btn-info">Add Row</button></th>
</div>
</tr>
</thead>
<tbody></tbody>
<tfoot>
<tr>
<td></td>
<td></td>
<td></td>
<td><input type="text" id="grdtot" value="" name="" /></td>
</tr>
</tfoot>
</table>
推荐阅读
- .net - WPF 渲染线程失败异常
- junit - Junit/Mockito 是否持有实际方法返回的值?
- html - 我有侧导航。当我在标签内使用标签时,显示 none 属性不适用于最后一个 .menu-icons 类。PL
- javascript - 单击另一个菜单项时如何强制禁用下拉功能
- python - 如何在条形图中为 xlabels 分配代码
- javascript - 无法更新材质 UI 下拉列表中的选定选项
- flutter - 计时器到期后,Listview 转到下一项
- html - 溢出:隐藏
- java - JTable,使用 LookAndFeel Nimbus 或 GTK 时更新颜色单元格
- angular - 无法在 Typescript 中访问对象属性值