Demo by jquery-az.com
jQuery, CSS and HTML
<!DOCTYPE html> <html> <head> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script> $(document).ready(function(){ $(".addrow").click(function(){ $(".tblcls").append("<tr><td>Table data</td><td>Table data</td></tr>"); }); }); </script> <style> .tblcls{ border-collapse: collapse; border: 2px solid #846733; } .tblcls th{ border: 2px solid #544221; color: #fff; background:#846733; } .tblcls tr{ padding:10px; border: 1px dotted black; color: #000; background:#D0BA80; } .tblcls td{ padding:10px; border: 1px dotted black; color: #000; } .addrow { margin:5px; } </style> </head> <body> <button class="addrow">Add new row by .append</button><br /> <div>Table 1</div> <table class="tblcls"> <tr> <th>Col 1</th> <th>Col 2</th> </tr> <tr> <td>Table data</td> <td>Table data</td> </tr> <tr> <td>Table data</td> <td>Table data</td> </tr> <tr> <td>Table data</td> <td>Table data</td> </tr> </table> <div>Table 2</div> <table class="tblcls"> <tr> <th>Col 1</th> <th>Col 2</th> </tr> <tr> <td>Table data</td> <td>Table data</td> </tr> </table> </body> </html>
Add new row by .append
Table 1
Col 1
Col 2
Table data
Table data
Table data
Table data
Table data
Table data
Table 2
Col 1
Col 2
Table data
Table data