动态将行添加到HTML表

Question

I have a asp.net web site that contains some tables. However these are not asp:Table ie 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 (ie C#) and if yes, how do I go about doing it?

Answer 1

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

Answer 2

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>

Answer 3

您可以使用JQuery进行此操作，但为此您需要提供ID和ID或类，或者仅搜索表数组，然后向其中注入行

Answer 4

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#

Answer 5

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.

eg 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