javascript - 使用 jQuery 删除表数据

Question

我有这个代码:

$(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 + '][desc]" class="regular-text" value="" /></td><td><input type="text" name="item[' + $counter + '][price]" class="price" value="0.00" /></td><td><input type="text" name="item[' + $counter + '][quantity]" class="quantity" value="0" /></td><td><label class="subtotal"></label></td></tr>');
 $('.quantity , .price').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) {
    $(".itemcode").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) {
    $(".itemcode").val(data[1]);
    $(".price").val(data[2]);
        // Give focus to the next input field to recieve input from user
        $("input[class='quantity']").focus();
});

});


$('#deleteitem').click(function() {
//Missing Function.

});

$(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>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><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 .'][desc]" class="regular-text" value="" /></td>
<td><input type="text" name="item['. 1 .'][price]" class="price" value="0.00" /></td>
<td><input type="text" name="item['. 1 .'][quantity]" class="quantity" value="0" /></td>
<td><label class="subtotal"></label></td>
</tr>
                </tbody>
                </table>
                <p><input type="button" id="buttonadd" value="Add Line"/></p>

我希望能够单击删除按钮并删除该行。正如你所看到的，我缺少一个功能。那里有很多，因为很多用于自动完成和添加功能。

Answer 1

你的意思是这样的

$('#deleteitem').click(function() {
    $(this).closest('tr').remove();
});

如果要动态添加行，则可以使用 live 而不是绑定(bind)

$('#myTable .delete').live('click', function() {
    $(this).closest('tr').remove();
});

编辑

很长时间没有使用 jQuery，但在最新版本中 live 被弃用了。编写此内容的新方法(正如 bfavaretto 已经指出的那样)是

$('#myTable').on('click', '.delete', function() {
    $(this).closest('tr').remove();
});