我有这段代码:
$(document).ready(function() {
$(".quantity").keydown(function(event) {
// Allow: backspace, delete, tab, escape, and enter
if ( event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 27 || event.keyCode == 13 ||
// Allow: Ctrl+A
(event.keyCode == 65 && event.ctrlKey === true) ||
// Allow: home, end, left, right
(event.keyCode >= 35 && event.keyCode <= 39)) {
// let it happen, don't do anything
return;
}
else {
// Ensure that it is a number and stop the keypress
if (event.shiftKey || (event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105 )) {
event.preventDefault();
}
}
});
$counter = 1;
$('#buttonadd').click(function() {
$counter++;
$('#invoiceitems > tbody:last').append('<tr><td><input type="button" class="deleteitem" value="Delete"/></td><td><input type="text" name="item[' + $counter + '][code]" id="' + $counter + '-1" class="code" value="" disabled="disabled"/></td><td><input type="text" name="item[' + $counter + '][desc]" id="' + $counter + '" class="regular-text" value="" /></td><td>£<input type="text" name="item[' + $counter + '][price]" id="' + $counter + '-3"class="price" value="0.00" disabled="disabled"/></td><td><input type="text" name="item[' + $counter + '][quantity]" id="' + $counter + '-4" class="quantity" value="0" /></td><td>£<label class="subtotal">0.00</label></td></tr>');
$('.quantity , .price , .code').unbind().on('change', function() {
UpdateTotals(this);
});
// Use the .autocomplete() method to compile the list based on input from user
$(".regular-text").autocomplete("client/inc/get_item_list.php", {
width: 260,
matchContains: true,
mustMatch: true,
minChars: 2,
//multiple: true,
//highlight: false,
//multipleSeparator: ",",
selectFirst: true
});
$(".regular-text").result(function(event, data, formatted) {
$(".code").val(data[1]);
$(".price").val(data[2]);
// Give focus to the next input field to recieve input from user
$("input[class='quantity']").focus();
});
});
// Use the .autocomplete() method to compile the list based on input from user
$(".regular-text").autocomplete("client/inc/get_item_list.php", {
width: 260,
matchContains: true,
mustMatch: true,
minChars: 2,
//multiple: true,
//highlight: false,
//multipleSeparator: ",",
selectFirst: true
});
$(".regular-text").result(function(event, data, formatted) {
$(".code").val(data[1]);
$(".price").val(data[2]);
// Give focus to the next input field to recieve input from user
$("input[class='quantity']").focus();
});
});
$(function() {
CalculateSubTotals();
CalculateTotal();
// Adding the change events for the Price and
// quantity fields only..
// Changing the total should not affect anything
$('.quantity , .price').on('change', function() {
UpdateTotals(this);
});
});
function UpdateTotals(elem) {
// This will give the tr of the Element Which was changed
var $container = $(elem).parent().parent();
var quantity = $container.find('.quantity').val();
var price = $container.find('.price').val();
var subtotal = parseInt(quantity) * parseFloat(price);
$container.find('.subtotal').text(subtotal.toFixed(2));
CalculateTotal();
}
function CalculateSubTotals() {
// Calculate the Subtotals when page loads for the
// first time
var lineTotals = $('.subtotal');
var quantity = $('.quantity');
var price= $('.price');
$.each(lineTotals, function(i){
var tot = parseInt($(quantity[i]).val()) * parseFloat($(price[i]).val());
$(lineTotals[i]).text(tot.toFixed(2));
});
}
function CalculateTotal() {
// This will Itearate thru the subtotals and
// claculate the grandTotal and Quantity here
var lineTotals = $('.subtotal');
var quantityTotal = $('.quantity');
var grandTotal = 0.0;
var totalQuantity = 0;
$.each(lineTotals, function(i) {
grandTotal += parseFloat($(lineTotals[i]).text());
totalQuantity += parseInt($(quantityTotal[i]).val())
});
$('.totalquantity').text(totalQuantity);
$('.grandtotal').text(parseFloat(grandTotal).toFixed(2));
};
HTML:
<table border="0" id="invoiceitems">
<thead>
<tr>
<td></td>
<td><strong>Item ID</strong></td>
<td><strong>Description</strong></td>
<td><strong>Unit Cost</strong></td>
<td><strong>Quantity</strong></td>
<td><strong>Total</strong></td>
</tr>
</thead>
<tfoot>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td><strong>Total:</strong></td>
<td>£<label class="grandtotal"></label></td>
</tr>
</tfoot>
<tbody>
<tr>
<td><input type="button" class="deleteitem" value="Delete"/></td>
<td><input type="text" name="item[1][code]" id="1-1" class="code" value="" disabled="disabled"/></td>
<td><input type="text" name="item[1][desc]" id="1" class="regular-text" value="" /></td>
<td>£<input type="text" name="item[1][price]" id="1-3" class="price" value="0.00" disabled="disabled"/></td>
<td><input type="text" name="item[1][quantity]" id="1-4" class="quantity" value="0" /></td>
<td>£<label class="subtotal"></label></td>
</tr>
</tbody>
</table>
<p><input type="button" id="buttonadd" value="Add Line"/></p>
问题是当您单击并从自动完成框添加值时,它会更新所有字段!在这里演示:http://www.clockworkhire.co.uk/jstest.html输入一些新行,然后在任何描述框中使用搜索字符串:sm58。我怎么过来这个问题?