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(){ $("tr").each(function(x) { if (x % 2) this.style.backgroundColor = "#fff"; }); $(".addrow").click(function(){ $(".tblcls").append("<tr><td>Table data</td><td>Table data</td></tr>"); $("tr").each(function(x) { if (x % 2) this.style.backgroundColor = "#fff"; }); }); }); </script> <style> .tblcls{ border-collapse: collapse; border: 2px solid #006655; } .tblcls th{ border: 1px dashed black; color: #fff; background:#006655; } .tblcls tr{ padding:10px; border: 1px dotted black; color: #000; background:yellow; } .tblcls td{ padding:10px; border: 1px dotted black; color: #000; } </style> </head> <body> <button class="addrow">Add row</button> <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> </body> </html>
Add row
Col 1
Col 2
Table data
Table data
Table data
Table data
Table data
Table data