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
jQuery simple form validations between start date and end date How to join string with number in JavaScript? How to change text color on click using JavaScript? How to check a variable is undefined in JavaScript? JavaScript simple alert on Click How can I redirect the user from one page to another using jQuery or pure JavaScript?