> ## Content Index
> Fetch the complete content index at: https://blog.aunlead.com/llms.txt
> Use this file to discover other available public pages before exploring further.

# Adding rows dynamically to a table using jQuery - Part 1
- URL: https://blog.aunlead.com/adding-rows-dynamically-to-a-table-using-jquery-part-1/
- Published: 2010-01-23T20:01:00.000Z
- Updated: 2021-01-20T11:36:42.000Z
- Description: First part in a multi part series on how to use jQuery to add rows dynamically to a table, assigning events to those new rows and processing/read the data
- Author: Rajat Nair
- Tags: Javascript, Jquery, #Import 2026-09-22 19:54

This is gonna be a multi part series on how to use jQuery to –  
• Adding rows dynamically to a table  
• Assigning events to those new rows  
• Processing/read the data

In this part, I would cover the html grid which would be used in this series.

```html
<div id="divData">
 <table id="tabData">
  <colgroup align="center" />
  <colgroup align="center" />
  <colgroup align="center" />
  <colgroup align="center" />
  <thead>
   <tr>
    <th>
     <asp:Label ID="Label1" runat="server" Text="Emp Name"></asp:Label>
    </th>
    <th>
     <asp:Label ID="Label2" runat="server" Text="City"></asp:Label>
    </th>
    <th>
     <asp:Label ID="Label3" runat="server" Text="Dept"></asp:Label>
    </th>
    <th>
     <asp:Label ID="Label4" runat="server" Text="Age"></asp:Label>
    </th>
   </tr>
  </thead>
  <tbody>
  </tbody>
 </table>
</div>

```

This grid contain 4 headers (see `thead` tag). The new rows would be added in the `tbody` section of the grid. I have removed the `tfoot` section from the grid to make the example simpler, but if you do wish to add the `tfoot` tag, you need to add it **BEFORE** the `tbody` section.