0

我有这个代码：

$(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。我该如何解决这个问题？

4

0 回答 0