Adding rows to <table> dynamically

Question

I have the following table in asp.net:

 <table style="width: 98%" id="tblOtherDoc">
 <tr>
 <td style="width: 10; text-align: left;">
 <span">Documents:</span>
 </td>
 </tr>
 <tr>
 <td>
 <asp:HiddenField ID="hidOtherPath" runat="server" Value='<%# Bind("UploadLocationOther") %>' />
 <a href="#" style="font-size: 12px; color: #2014FF; float: left; vertical-align: middle" onclick="uploadNew(this)">Add Other</a> <span style="float: left;">
 <asp:CheckBox ID="cbOther" runat="server" onclick="otherDocsClicked(this)" Checked='<%# Bind("OtherAttached") %>' /></span>
 <a href="#" style="font-size: 12px; color: #2014FF; float: left; vertical-align: middle" onclick="downloadFile(this)" title="docOther">View</a>
 </td>
 </tr>
 </table>

Each time the checkbox is clicked, I add a new exact row to the table using jquery (so that multiple documents can be added).

// Add new area for Other Document attachements
 function otherDocsClicked(row) {
 var isChecked = $(row).closest("tr").find("input[type=checkbox][id*=cbOther]").is(':checked');
 if (isChecked == true) {
 var clone = $('#tblOtherDoc tbody>tr:last').clone(true);
 clone.find("input[type='hidden'], select").val(""); 
 clone.find("input[type='checkbox'], checked").removeAttr('checked');
 clone.insertAfter('#tblOtherDoc tbody>tr:last');
 }
 }

I would like to know how to add these rows dynamically using C# when I do a get to return a list of documents that have already been added.

Or alternatively, if anyone thinks there's a better way to do this I would really appreciate any input since this is the only solution I could come up with and it seems to be giving me more trouble than anything else.

Answer 1

You can use asp.net table control:

Table Control

Eg. Adding a row in c# code:

TableRow row = new TableRow();
 TableCell cell = new TableCell();
 cell.Controls.Add(new TextBox());
 row.Cells.Add(cell);
 table.Rows.Add(row);

In your .aspx page:

<asp:Table ID="table" runat="server" /> 

• Melanie: I've tried using this but the problem I have when using <asp:Table> is that my onclick on the CheckBox (that I call jquery for to add another duplicate row) no longer fires.

Answer 2

Use Kapils answer, but remove the jquery code from the checkbox. Use jquery to attach to the on onclick event. Ins stead of onclick="otherDocsClicked(this)" in the checkbox details, add a class for the checkbox eg. chkDoSomething and then do the following.

$(".chkDoSomething").live('change',function(){
 //your code goes here.
 }

Then you should be able to add the row in c# like Kapil suggested and your jquery should still fire