Geek Answers Handbook

Jquery add and remove table rows

I have an html table that dynamically adds and removes rows with jquery. The number of lines is limited by a jquery counter, which allows the user to add up to 4 lines. My problem is that when the user creates the 4th line, they have reached the limit, but when they delete the line, the limit is still in place and they cannot add more lines.

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)); }
+4
source share
4 answers

A bunch of fixes,

  • Removed an extra handler for the delete button
  • The identifier of the button changes to the class, since you should not duplicate the identifier. Read why you should not duplicate IDs .
  • Added logic to enable the Add row button. See fixed violin .
  • Removed var declaration inside Add Row handler to update 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"); });
+7
source

You just need to turn on your button again and decrease the counter when deleting the line:

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

When you click on btn removal, you should decrease your counter number and include the value of the bud and properties

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

I updated your javascript, see the code on the 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 counted the counter incorrectly, and your method for the delete button did not call.

+2
source

More articles:


All Articles