Golang React JS Technology Blog

Using jQuery add new table row on click

Add New Table Row at bottom

Example

1 John 654 
<!DOCTYPE html>
<html lang="en">
   <head>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
      <script>
         $(document).ready(function() {
             //Try to get tbody first with jquery children. works faster!
         var tbody = $('#myTable').children('tbody');
         
         //Then if no tbody just select your table 
         var table = tbody.length ? tbody : $('#myTable');
         
         
         $('button').click(function(){
         //Add row
         table.append('<tr><td>2</td><td>Mick</td><td>254</td></tr>');
         })
         });
      </script>
   </head>
   <body>
      <button>Add row</button>
      <table id="myTable">
         <tbody>
            <tr>
               <td>1</td>
               <td>John</td>
               <td>654</td>
            </tr>
         </tbody>
      </table>
   </body>
</html>
Most Helpful This Week
How to set checkbox and radio option checked on load with jQuery? How to change the height of Textarea on click? JavaScript convert string variable in boolean using Regex ES6 method of declaration multiple variables in one line jQuery example of scroll to top jQuery get the coordinates of div clicked