Adding rows dynamically to a table using jQuery - Part 1

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.

<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.