Posted By

trevo on 09/22/12


Tagged

rowjquerytable


Versions (?)

Add row to a Table with Jquery


 / Published in: HTML
 

This code is able to add row to a table in html using jquery.

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3.  
  4. <title>Add Row example</title>
  5. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
  6. <script type="text/javascript">
  7. <!-- jQuery Code will go underneath this -->
  8. $(document).ready(function () {
  9. // Code between here will only run when the document is ready
  10. $("a[name=addRow]").click(function() {
  11. // Code between here will only run when the a link is clicked and has a name of addRow
  12. $("table#myTable tr:last").after('<tr><td>Row 4</td></tr>');
  13. return false;
  14. });
  15. });
  16. </head>
  17.  
  18.  
  19. <table style="width: 100%" id="myTable">
  20. <tr><td>Row 1</td></tr>
  21. <tr><td>Row 2</td></tr>
  22. <tr><td>Row 3</td></tr>
  23. <a href="#" name="addRow">Add Row</a>
  24.  
  25. </body>
  26.  
  27. </html>

Report this snippet  

You need to login to post a comment.