How to add or remove rows inside a table dynamically using jQuery

Topic: JavaScript / jQuery« Prev|Next »

Answer: Use the jQuery .append() or .remove() Method

You can use the jQuery .append() method to append or add rows inside a HTML table. Similarly, you can use the .remove() method to remove or delete table rows as well as all everything inside it from the DOM dynamically with jQuery. Check out the following example.

  • <!DOCTYPE html>
  • <html lang="en">
  • <head>
  • <meta charset="utf-8">
  • <title>jQuery Add / Remove Table Rows</title>
  • <style type="text/css">
  •     table{
  •         width: 100%;
  •         margin: 20px 0;
  •         border-collapse: collapse;
  •     }
  •     table, th, td{
  •         border: 1px solid #cdcdcd;
  •     }
  •     table th, table td{
  •         padding: 5px;
  •         text-align: left;
  •     }
  • </style>
  • <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
  • <script type="text/javascript">
  •     $(document).ready(function(){
  •         $(".add-row").click(function(){
  •             var name = $("#name").val();
  •             var email = $("#email").val();
  •             var markup = "<tr><td><input type='checkbox' name='record'></td><td>" + name + "</td><td>" + email + "</td></tr>";
  •             $("table tbody").append(markup);
  •         });
  •         
  •         // Find and remove selected table rows
  •         $(".delete-row").click(function(){
  •             $("table tbody").find('input[name="record"]').each(function(){
  •                 if($(this).is(":checked")){
  •                     $(this).parents("tr").remove();
  •                 }
  •             });
  •         });
  •     });    
  • </script>
  • </head>
  • <body>
  •     <form>
  •         <input type="text" id="name" placeholder="Name">
  •         <input type="text" id="email" placeholder="Email Address">
  •         <input type="button" class="add-row" value="Add Row">
  •     </form>
  •     <table>
  •         <thead>
  •             <tr>
  •                 <th>Select</th>
  •                 <th>Name</th>
  •                 <th>Email</th>
  •             </tr>
  •         </thead>
  •         <tbody>
  •             <tr>
  •                 <td><input type="checkbox" name="record"></td>
  •                 <td>Peter Parker</td>
  •                 <td>peterparker@mail.com</td>
  •             </tr>
  •         </tbody>
  •     </table>
  •     <button type="button" class="delete-row">Delete Row</button>
  • </body> 
  • </html>

Related FAQ

Here are some more FAQ related to this topic:

 
Close

Your Feedback:

 

We would love to hear from you! Please say something.