我有一个包含表头和动态行添加的表。
我要计算小计和总计。我成功创建了添加行。当我尝试放入数据时,总计未显示
我尝试过这样,但不起作用
$(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>
答案 0 :(得分:1)
几个问题。
这是使用委派的解决方案,我修复了您丢失的总计类,并将总计更改为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>