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
JavaScript check if first string contains all characters of second string Generate random password for form field on click using JavaScript jQuery check if an element is visible or hidden jQuery move multi select values from one to another multi select list How can I redirect the user from one page to another using jQuery or pure JavaScript? jQuery show input text inside div after on click event