JQuery добавить и удалить строки таблицы

Question

У меня есть таблица html, которая динамически добавляет и удаляет строки с jquery. Количество строк ограничено счетчиком jquery, который позволяет пользователю добавлять до 4 строк. Моя проблема в том, что когда пользователь создает 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. Удалены декларация вар внутри Добавьте обработчик Роу, чтобы обновить глобальные переменные

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

По щелчку на удаление БТН вам следует уменьшить количество счетчика и позволило бутон и свойства значение

$("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"); 
}); 

Проблема заключалась в том, что вы не правильно отсчитывать счетчик и ваш метод для удаления кнопки не дозвонились.