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 with name and email validations How to check a variable is undefined in JavaScript? Using jQuery delete table row on click JavaScript calculate Fahrenheit from Celsius How to declare multiple variables in one statement in Javascript? jQuery show input text inside div after on click event