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 build simple tabs with jQuery? What's the difference between let and var? Generate random password for form field on click using JavaScript How to current URL, HOST and URL attributes using JavaScript or jQuery? jQuery get the coordinates of div clicked Get largest number from each sub-arrays