将行动态添加到 HTML 表答案

【问题标题】：Adding rows dynamically to a HTML table将行动态添加到 HTML 表
【发布时间】：2012-07-16 04:28:50
【问题描述】：

我有一个包含一些表格的 asp.net 网站。然而，这些不是 asp:Table，即它们是以这种方式构建的简单 HTML 表格：

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

现在我想知道是否可以从后面的代码（即 C#）动态地将行添加到该表中，如果可以，我该怎么做？

【问题讨论】：

Web 表单或 MVC。我建议在 MVC 中为这类事情做这件事，或者如果你被 Web 表单卡住了，那么让表 runat="server"
MVC 。将行添加到 asp:Table 非常简单，但不知道为 HTML 表添加行。
参考这篇文章：-stackoverflow.com/questions/171027/add-table-row-in-jquery

标签： c# asp.net html-table

【解决方案1】：

你可以给它一个 Id 并设置 runat="server" 属性，并使用你给它的 Id 从后面的代码中使用它

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);

其中 T 是您的表的 ID

【讨论】：

如何添加 css 类以与每一行或元素关联？这些行和单元格元素似乎没有功能可以做到这一点。
有 Cell.style 属性我猜这是添加样式的地方，不过我从未尝试过

【解决方案2】：

已经有一段时间了，但是 ASP.NET Webforms 中有用于此类东西的中继器控件。

这是一篇介绍这个概念的好文章：Data Repeater Controls in ASP.NET

我认为这对你来说比使用 AJAX/JScript 破解它更容易

除此之外：Daniel Casserly 是对的 - 如果您在 MVC 中执行此操作非常容易（如果您使用 Razor-Syntax 则更容易），因为它会翻译为：

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

【讨论】：

我知道有人比我懒得写 Razor 代码。谢谢卡斯滕 :-)

【解决方案3】：

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

【讨论】：

哦，是的，一个ID肯定可以给。有什么方法可以在不使用 JQuery 的情况下做到这一点？

【解决方案4】：

是的，您可以：点此链接：Adding new rows to HTML table dynamically

还有这个：How Dynamically Add Rows into ASP.NET Table using C#

【讨论】：

【解决方案5】：

我认为最好从后面的代码创建整个HTML 表。为此，我们可以添加一个文字并在后面的代码中使用它来从后面的代码中添加一个表结构。

例如让我们制作一张 HTML 鸟类详细信息表。只是为了简短说明，我没有包括填充鸟类详细信息的数据表部分。

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>";
    }

详细解释请访问此链接：

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

【讨论】：