CODEWITHSUNDEEP
c#asp.nethtml-table
Saiesh
Saiesh

Reputation: 641

Adding rows dynamically to a HTML table

I have a asp.net web site that contains some tables. However these are not asp:Table i.e. they are simple HTML tables built this way: 

 <table><tr><td></td></tr></table>

Now I would like to know if it's possible to add rows dynamically to this table from the code behind (i.e. C#) and if yes, how do I go about doing it?

Upvotes: 2

Views: 22299

Answers (5)

Shantilal Suthar
Shantilal Suthar

Reputation: 127

I think its better to create the entire HTML table from the code behind. For this we can add a literal and use it in the code behind to add a table structure from the code behind.

e.g. Lets make an HTML table of Birds detail. Just to keep explanation short I have not included the data table part filled with birds detail. 

if (dtBirdsDetail.Rows.Count > 0)
    {
      litBirdsTable.Text = "<center><table id='tbldata' cellspacing='0' cellpadding='1' border='1' style='border-collapse: collapse;'>" + System.Environment.NewLine;
      litBirdsTable.Text += "<tr>";

      //add datatable columns to html table as heading
for (int liColumnIndex = 0; liColumnIndex < dtBirdsDetail.Columns.Count;liColumnIndex++)
       {
         litBirdsTable.Text += "<th>" + dtBirdsDetail.Columns[liColumnIndex].ColumnName 
                             + "</th>" +   System.Environment.NewLine;
       }
       litBirdsTable.Text += System.Environment.NewLine + "</tr>";

       //add datatable rows to html table
       for (int liRowIndex = 0; liRowIndex < dtBirdsDetail.Rows.Count; liRowIndex++)
       {
         litBirdsTable.Text += "<tr>";
         litBirdsTable.Text += "<td>" + dtBirdsDetail.Rows[liRowIndex]["ID"] + "</td>" +              
                                System.Environment.NewLine;
         litBirdsTable.Text += "<td>" + dtBirdsDetail.Rows[liRowIndex]["BirdName"] + " 
                               </td>" + System.Environment.NewLine;
         litBirdsTable.Text += "<td>" + dtBirdsDetail.Rows[liRowIndex]["TypeOfBird"] + " 
                               </td>" + System.Environment.NewLine;
         litBirdsTable.Text += "<td>" + dtBirdsDetail.Rows[liRowIndex]["ScientificName"] 
                             + "</td>" + System.Environment.NewLine;
         litBirdsTable.Text += "</tr>";
       }
        litBirdsTable.Text += "</table></center>";
    }

For detailed explanation, visit this link:

http://codevariation.blogspot.com/2018/03/html-table-design-with-dynamic-data.html

Upvotes: 0

Maha Khairy
Maha Khairy

Reputation: 352

you can give it an Id and Set runat="server" attribute and use it from code behind using Id you gave it

System.Web.UI.HtmlControls.HtmlTableRow r=new System.Web.UI.HtmlControls.HtmlTableRow();
            System.Web.UI.HtmlControls.HtmlTableCell c = new System.Web.UI.HtmlControls.HtmlTableCell();
            c.InnerText = "New Cell";
            r.Cells.Add(c);
            T.Rows.Add(r);

where T is the Id of your table

Upvotes: 3

KF2
KF2

Reputation: 10143

yes you can: follow this link:Adding new rows to HTML table dynamically

and this:How Dynamically Add Rows into ASP.NET Table using C#

Upvotes: 1

Random Dev
Random Dev

Reputation: 52280

It's been a while but there is the repeater-control in ASP.NET Webforms for this kind of stuff.

Here is a nice article introducing this conept: Data Repeater Controls in ASP.NET

I think this will be easier for you than hacking this with AJAX/JScript

Aside from this: Daniel Casserly is right - this is very easy if you do it in MVC (even easier if you use Razor-Syntax), as it would translate do something like:

<table>
    @foreach (var item in Model)
    {
        <tr>
            <td>@item.Name</td>
            ... whatever you need here ...
        </tr>
    }
</table>

Upvotes: 2

HatSoft
HatSoft

Reputation: 11191

You can do this with JQuery but for that you will need to give and Id or class or just search for the table array and then inject rows to it

Upvotes: 1

Related Questions