I have a html table that dynamically adds and removes rows with jQuery. The number of rows is limited by jQuery counter which allows a user to add up to 4 rows. My problem is that when a user creates the 4th row they have reached the limit but when they delete a row the limit still remains in place and they can't add any more rows.

/

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));
}

I have a html table that dynamically adds and removes rows with jQuery. The number of rows is limited by jQuery counter which allows a user to add up to 4 rows. My problem is that when a user creates the 4th row they have reached the limit but when they delete a row the limit still remains in place and they can't add any more rows.

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));
}

• javascript
• jquery
• html-table

4 Answers 4

Bunch of fixes,

1. Removed extra handler for delete button
2. change button ID to class as you should not duplicate ID. Read why you should not duplicate ID.
3. Added logic to enable the Add row button. See Fixed fiddle.
4. Removed var declaration inside Add Row handler to update the global 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");
});

You just need to re-enable your button and decrement the counter when you delete a row:

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

On click on delete btn you should decrease your counter number and enabled the buton and property value

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

});

I updated your javascript please look at the code on fiddle:

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

The problem was, that you did not properly count down the counter and your method for the delete-button did not get called.