Dear Reader, let us know about How to “Add / Delete Multiple Rows using jQuery“. As in the previous article, you have learned about “How to Add/Delete Multiple HTML Rows using JavaScript“. Now in this post, you are going to see the magic of flexible and stunning jQuery. jQuery does its work very easily, using a very short length of the code. Means you do not need to worry about new row’s generation and old row’s deletion, jQuery does add rows using single predefined function append() and delete rows using single predefined function remove() with some if conditions.
Step 1. Create a PHP file named “add_delete.php”.
Here you just copy and paste this code and run on your local or live server for seeing the result.
Step 2. Then on browser click the “Add Row” button.
Now new row will be generated.
Step 3. For deletion of rows, you just need to check the check-boxes, how much rows you want to delete. Then click on “Delete Row”.
It will delete all rows, having the checkbox checked.
But if you will select all rows, then it will give you an alert that “All rows can’t be deleted“.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 |
<!DOCTYPE html> <html lang="en"> <head> <title>Add Row / Delete Row using jQuery</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <table class="table table-striped table-bordered"> <thead> <tr> <th style="text-align: left;">Emp Details</th> <th style="text-align: right;"><input type="button" class="add-row btn btn-primary" value="Add Row"> - <button type="button" class="delete-row btn btn-danger">Delete Row</button></th> </tr> </thead> <tbody> <tr> <td colspan="2"> <table class="table table-bordered table-striped"> <tbody id="emp_details"> <tr> <th>Sr. No.</th> <th>Emp Department</th> <th>Emp Name</th> </tr> <tr> <td><input type='checkbox' name='record[]'></td> <td><select name='emp_department[]' class='form-control emp_department' > <option value='0'>Select</option> <option value='1'>IT Department</option> <option value='2'>Sales Department</option> <option value='3'>Development Department</option> </select></td> <td><input type='text' name='emp_name[]'></td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </div> </body> </html> <script type="text/javascript"> // For Adding and Deleting New Row start ----------------------------------------------------------- $(document).ready(function() { $(".add-row").click(function() { var html = ""; html += "<tr><td><input type='checkbox' name='record[]'></td><td>"; html += "<select name='emp_department[]' class='form-control emp_department' >"; html += "<option value='0'>Select</option>"; html += "<option value='1'>IT Department</option>"; html += "<option value='2'>Sales Department</option>"; html += "<option value='3'>Development Department</option>"; html += "</select></td>"; html += "<td><input type='text' name='emp_name[]'></td></tr>"; $("table tbody#emp_details").append(html); }); // Find and remove selected table rows $(".delete-row").click(function() { var row_count = $("#emp_details").find('input[name="record[]"]').length; var checked_row_count = $('[name="record[]"]:checked').length; if(row_count != checked_row_count) { $("#emp_details").find('input[name="record[]"]').each(function() { if($(this).is(":checked")) { $(this).parents("#emp_details tr").remove(); } }); } else { alert("All rows can't be deleted"); return false; } }); }); // For Adding and Deleting New Row close -----------------------------------------------------------> </script> |
Congratulations you have successfully learned How to “Add / Delete Multiple Rows using jQuery”, if this post is helpful for you then please share this post on social media and if you have any query then please contact us or comment below and donβt forgot us to follow and like on Social Media, Thanks.
2 Comments:
ferragamo belt April 25, 2018
I am just commenting to make you be aware of of the wonderful experience our daughter undergone viewing your web site. She realized a good number of issues, with the inclusion of how it is like to have an incredible teaching spirit to make most people with ease have an understanding of some very confusing things. You truly exceeded my expected results. Thank you for coming up with the practical, trustworthy, explanatory and in addition cool tips on this topic to Ethel.
Webpreparations Team April 25, 2018
My Pleasure π