Advanced Search

Add row to a Table with Jquery

/ Published in: HTML
Save to your folder(s)
This code is able to add row to a table in html using jquery.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  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. <head>
  5. <title>Add Row example</title>
  6. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
  7. <script type="text/javascript">
  8.  <!-- jQuery Code will go underneath this -->
  9.  $(document).ready(function () {        
  10.         // Code between here will only run when the document is ready
  11.         $("a[name=addRow]").click(function() {
  12.                 // Code between here will only run when the a link is clicked and has a name of addRow
  13.                 $("table#myTable tr:last").after('<tr><td>Row 4</td></tr>');
  14.                 return false;
  15.         });
  16.  });
  17. </script>
  18. </head>
  19.  
  20. <body>
  21.  
  22. <table style="width: 100%" id="myTable">
  23.  <tr><td>Row 1</td></tr>
  24.  <tr><td>Row 2</td></tr>
  25.  <tr><td>Row 3</td></tr>
  26. </table>
  27. <a href="#" name="addRow">Add Row</a>
  28.  
  29. </body>
  30.  
  31. </html>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.