How to add table row in jQuery

/ / 0 Comments

[ads] Add table row in jQuery: Here in this article we learn 4 different ways to add table row in jQuery on button click. i.e how to append row to table tbody. Methods like .append(), prepend(), .after() and .before() are used to add table rows.

Lets see each of these method with an example. Before that we just add a button and table and 2 texboxes for our example. Here html code looks like as show below

HTML CODE :

Name <input id="txtName" type="text" /> Location <input id="txtLocation" type="text" />
<button id="btnAddRow">Add New Row </button>
<br/>
<br/>
<table border="1" id="myTable">
  <thead>
    <th>Name</th>
    <th>Location</th>
  </thead>
  <tr id="trow">
    <td>Satinder singh</td>
    <td>Mumbai</td>
  </tr>
</table>

# Using .append()

By using .append() method we add element at the end of the table i.e at the last index.

Thank you for reading, pls keep visiting this blog and share this in your network. Also, I would love to hear your opinions down in the comments.

PS: If you found this content valuable and want to do a favor, then Buy me a coffee

Subscribe to our newsletter

Get the latest and greatest from Codepedia delivered straight to your inbox.


Post Comment

Your email address will not be published. Required fields are marked *

0 Comments