新手在这里。我有一个计算数量和价格的脚本。
<script type="text/javascript">
$('#quantity_1,#product_price_1').on('input',function() {
var quantity_1 = parseInt($('#quantity_1').val());
var product_price_1 = parseFloat($('#product_price_1').val());
$('#total_cost_1').val((product_price_1 * quantity_1 ? product_price_1 * quantity_1 : 0).toFixed(2));
});
$(document).ready(function() {
$("#calculate_1").click(function() {
var rate = parseInt($('#rate_1').val());;
var total_cost = parseInt($('#total_cost_1').val());
var total_rate = rate * total_cost;
$('#total_cost_1').val((total_rate).toFixed(2));
});
});
</script>
在我的HTML表中，我还有另一个jquery脚本，用于添加新的HTML行。我现在的问题是我无法将计算器脚本添加到新生成的HTML行中。
这是表格的HTML代码
<table class="table table-bordered">
<tr>
<th><input class='check_all' type='checkbox' onclick="select_all()"/></th>
<th>Product Code</th>
<th>Product name</th>
<th>Price</th>
<th>Rate</th>
<th>Quantity</th>
<th>Total Cost</th>
</tr>
<tr>
<td><input type='checkbox' class='chkbox'/></td>
<td><input class="form-control autocomplete_txt" type='text' data-type="product_code" id='product_code_1' name='product_code[]'/></td>
<td><input class="form-control autocomplete_txt" type='text' data-type="product_name" id='product_name_1' name='product_name[]'/> </td>
<td><input class="form-control" type='number' data-type="product_price" id='product_price_1' name='product_price[]' onkeyup="AutoCalc(this)"/></td> <!-- purchase_cost -->
<td style="width: 150px;">
<input class="form-control" type='number' id='rate_1' name='rate[]' min='0' step='0.1' style="width: 99px; float: left;" />
<button type="button" id="calculate_1" class="btn btn-sm btn-dark btn-icon" data-toggle="tooltip" title="calculate with rate value" style="width: 20px; float: left;"><i class="fas fa-calculator"></i></button>
</td>
<td><input class="form-control" type='number' id='quantity_1' name='quantity[]' onkeyup="AutoCalc(this)"/> </td>
<td><input class="form-control" type='text' class="subtotal" id='total_cost_1' name='total_cost[]'/> </td>
</tr>
</table>
<input class="form-control" type='hidden' data-type="product_id_1" id='product_id_1' name='product_id[]'/>
<button type="button" class='btn btn-danger delete'>- Delete</button>
<button type="button" class='btn btn-success addbtn'>+ Add More</button>
一旦按下+添加更多按钮，它将调用此脚本，以添加新行
var i=$('table tr').length;
$(".addbtn").on('click',function(){
count=$('table tr').length;
var data="<tr><td><input type='checkbox' class='chkbox'/></td>";
data+="<td><input class='form-control autocomplete_txt' type='text' data-type='product_code' id='product_code_"+i+"' name='product_code[]'/></td>";
data+="<td><input class='form-control autocomplete_txt' type='text' data-type='product_name' id='product_name_"+i+"' name='product_name[]'/></td>";
data+="<td><input class='form-control' type='number' data-type='product_price' id='product_price_"+i+"' name='product_price[]'/></td>";
data+="<input class='form-control' type='hidden' data-type='product_id' id='product_id_"+i+"' name='product_id[]'/>";
data+="<td><input class='form-control' type='number' id='rate_"+i+"' name='rate[]' min='0' step='0.5' style='width: 99px; float: left;'/><button type='button' id='calculate_1' class='btn btn-sm btn-dark btn-icon' data-toggle='tooltip' title='calculate with rate value' style='width: 20px; float: left;''><i class='fas fa-calculator'></i></button></td>";
data+="<td><input class='form-control' type='number' id='quantity_"+i+"' name='quantity[]'/> </td>";
data+="<td><input class='form-control' type='text' class='subtotal' id='total_cost_"+i+"' name='total_cost[]'/> </td></tr>";
$('table').append(data);
i++;
});
我的问题是如何将我提到的第一个脚本（计算器）添加到上面的最后一个代码中？
答案 0 :(得分：0)
向所有像我这样的新手问好。如果发生这种情况，您将被要求做这样的项目，这是代码段。它已经有逗号，例如123,456,789。感谢这些人@ OliverTrampleasure，@ 20yco和@Haldo
var rowCount = 1;
$('#add').click(function() {
rowCount++;
$('#orders').append('<tr id="row'+rowCount+'"><td><input class="form-control product_price" type="number" data-type="product_price" id="product_price_'+rowCount+'" name="product_price[]" for="'+rowCount+'"/></td><input class="form-control" type="hidden" data-type="product_id" id="product_id_'+rowCount+'" name="product_id[]" for="'+rowCount+'"/><td><input class="form-control quantity" type="number" class="quantity" id="quantity_'+rowCount+'" name="quantity[]" for="'+rowCount+'"/> </td><td><input class="form-control total_cost" type="text" id="total_cost_'+rowCount+'" name="total_cost[]" for="'+rowCount+'" readonly/> </td><td><button type="button" name="remove" id="'+rowCount+'" class="btn btn-danger btn_remove cicle">-</button></td></tr>');
});
// Add a generic event listener for any change on quantity or price classed inputs
$("#orders").on('input', 'input.quantity,input.product_price', function() {
getTotalCost($(this).attr("for"));
});
$(document).on('click', '.btn_remove', function() {
var button_id = $(this).attr('id');
$('#row'+button_id+'').remove();
});
// Using a new index rather than your global variable i
function getTotalCost(ind) {
var qty = $('#quantity_'+ind).val();
var price = $('#product_price_'+ind).val();
var totNumber = (qty * price);
// .toLocaleString
var tot = totNumber.toLocaleString("en-US", { maximumFractionDigits: 2});
$('#total_cost_'+ind).val(tot);
calculateSubTotal();
}
function calculateSubTotal() {
var subtotal = 0;
$('.total_cost').each(function() {
// replace ',' here
subtotal += parseFloat($(this).val().replace(/,/g,''));
});
// toLocaleString
$('#subtotal').val(subtotal.toLocaleString("en-US", { maximumFractionDigits: 2}));
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="col-md-12">
<div class="line line-dashed line-lg pull-in"></div>
<div class="row">
<table class="table table-bordered" id="orders">
<tr>
<th>Price</th>
<th>Quantity</th>
<th>Total Cost</th>
<th>
</th>
</tr>
<tr>
<td><input class="form-control product_price" type='number' data-type="product_price" id='product_price_1' name='product_price[]' for="1"/></td> <!-- purchase_cost -->
<td><input class="form-control quantity" type='number' id='quantity_1' name='quantity[]' for="1"/></td>
<td><input class="form-control total_cost" type='text' id='total_cost_1' name='total_cost[]' for='1' readonly/></td>
<td><button type="button" name="add" id="add" class="btn btn-success circle">+</button></td>
</tr>
</table>
<input class="form-control" type='hidden' data-type="product_id_1" id='product_id_1' name='product_id[]'/>
</div>
</div>
<div class="line line-dashed line-lg pull-in" style="clear: both;"></div>
<div class="col-md-12 nopadding">
<div class="col-md-4 col-md-offset-4 pull-right nopadding">
<div class="col-md-8 pull-right nopadding">
<div class="form-group">
<td><input class="form-control subtotal" type='text' id='subtotal' name='subtotal' readonly/></td>
</div>
</div>
<div class="col-md-3 pull-right">
<div class="form-group">
<label>Subtotal</label>
</div>
</div>
</div>
</div>
</body>
</html>