jquery添加和刪除表格行

Question

我有一個html表格，動態地添加和刪除jQuery的行。行數受jQuery計數器限制，允許用戶添加最多4行。我的問題是，當用戶創建第四行時，他們已經達到了限制，但是當他們刪除一行時，限制仍然存在，他們不能添加更多的行。

http://jsfiddle.net/nallad1985/sqrrt/

HTML

<table id="myTable" class="order-list"> 
<thead> 
    <tr> 
     <td>Name</td> 
     <td>Price</td> 
    </tr> 
</thead> 
<tbody> 
    <tr> 
     <td> 
      <input type="text" name="name" /> 
     </td> 
     <td> 
      <input type="text" name="price1" /> 
     </td> 
     <td><a class="deleteRow"></a> 
     </td> 
    </tr> 
</tbody> 
<tfoot> 
    <tr> 
     <td colspan="5" style="text-align: left;"> 
      <input type="button" id="addrow" value="Add Row" /> 
     </td> 
    </tr> 
    <tr> 
     <td colspan="">Grand Total: $<span id="grandtotal"></span> 

     </td> 
    </tr> 
</tfoot> 

JQUERY

$(document).ready(function() { 
var counter = 0; 
$("#addrow").on("click", function() { 
    var counter = $('#myTable tr').length - 2; 
    var newRow = $("<tr>"); 
    var cols = ""; 

    cols += '<td><input type="text" name="name' + counter + '"/></td>'; 
    cols += '<td><input type="text" name="price' + counter + '"/></td>'; 

    cols += '<td><input type="button" id="ibtnDel" value="Delete"></td>'; 
    newRow.append(cols); 
    if (counter == 4) $('#addrow').attr('disabled', true).prop('value', "You've reached the limit"); 
    $("table.order-list").append(newRow); 
    counter++; 
}); 

$("table.order-list").on("change", 'input[name^="price"]', function (event) { 
    calculateRow($(this).closest("tr")); 
    calculateGrandTotal(); 
}); 

$("table.order-list").on("click", "#ibtnDel", function (event) { 
    $(this).closest("tr").remove(); 
    calculateGrandTotal(); 
}); 

}); 

function calculateRow(row) { 
var price = +row.find('input[name^="price"]').val(); 

} 

function calculateGrandTotal() { 
var grandTotal = 0; 
$("table.order-list").find('input[name^="price"]').each(function() { 
    grandTotal += +$(this).val(); 
}); 
$("#grandtotal").text(grandTotal.toFixed(2)); 
} 

Answer 1

束脩復，

1. 取消了刪除按鈕
2. 改變按鈕ID來上課，你不應該重複ID額外的處理程序。 Read why you should not duplicate ID。
3. 添加了啓用添加行按鈕的邏輯。見Fixed fiddle。
4. 刪除VAR聲明中添加行處理程序，以更新全局變量

http://jsfiddle.net/sqrrt/2/

$("table.order-list").on("click", ".ibtnDel", function (event) { 
    $(this).closest("tr").remove(); 
    calculateGrandTotal(); 

    counter -= 1 
    $('#addrow').attr('disabled', false).prop('value', "Add Row"); 
}); 

Answer 2

你只需要重新啓用按鈕和減少合作溫特，當你刪除行：

$("table.order-list").on("click", "#ibtnDel", function (event) { 
    $(this).closest("tr").remove(); 
    calculateGrandTotal(); 
    counter--; 
    $('#addrow').prop('disabled', false).prop('value', "Add row"); 
}); 

Answer 3

在點擊刪除BTN你應該減少你的櫃檯號碼並啓用了布通和屬性值

$("table.order-list").on("click", "#ibtnDel", function (event) { 
    $(this).closest("tr").remove(); 
    calculateGrandTotal(); 
    counter = counter-1; 
    $("#addrow").attr("disabled", false).prop("value", "Add Row") 

}); 

Answer 4

我更新了你的javascript請看看小提琴上的代碼：

http://jsfiddle.net/sqrrt/3/

$("table.order-list").on("click", "#ibtnDel", function (event) { 
    $(this).closest("tr").remove(); 
    calculateGrandTotal(); 
    counter --; 
    if (counter < 5) $('#addrow').attr("disabled", false).prop('value', "Add Row"); 
}); 

的問題是，你沒有正確的倒計時計數器和你的刪除按鈕的方法並沒有被調用。