C# 动态生成 HTML Table

Question

我正在尝试动态生成 HTML Table。我所追求的是在 header 行下有一个 header 行和第二行文本框（全部在页面上水平对齐）。我尝试了这种语法 - 但是它忽略了在复选框列表中选择的值，并且输入的文本框相互堆叠而不是水平排列。

有人可以纠正我的错误吗？

    protected void btnBullDozer_Click(object sender, EventArgs e)
{
    StringBuilder sb = new StringBuilder(string.Empty);
    var columnname = string.Empty;
    foreach (System.Web.UI.WebControls.ListItem item in checkboxtest.Items)
    {
        columnname = item.Text;

        sb.Append("<table>");
        sb.Append("<tr>");
        sb.Append("<th>Sponsor Level</th>");
        sb.Append("<th>" + item.Selected + "</th>");
    }
    sb.Append("</tr>");
    var cm = string.Empty;
    int z = 1;
    foreach (System.Web.UI.WebControls.ListItem item in checkboxtest.Items)
    {
        cm = item.Text;
        sb.Append("<tr>");
        sb.Append("<td><input type=\"text\" name=\"field " + z + "\"></td>");
        z = z + 1;
    }
    sb.Append("</tr>");
    sb.Append("</table>");

    mask.InnerHtml = sb.ToString();
}

假设我想要的网格应该是什么样子 - 假设用户从复选框列表中选择了 4 个选项，那么我想要 5 headers（赞助商级别，以及选择的名称）然后一行下面有 5 个空文本框用于数据输入

Answer 1

    protected void btnBullDozer_Click(object sender, EventArgs e)
{
    StringBuilder sb = new StringBuilder(string.Empty);
    var columnname = string.Empty;

        sb.Append("<table>");
        sb.Append("<tr>");
    foreach (System.Web.UI.WebControls.ListItem item in checkboxtest.Items)
    {
        columnname = item.Text;

        sb.Append("<th>Sponsor Level</th>");
        sb.Append("<th>" + item.Selected + "</th>");
    }
    sb.Append("</tr>");
    var cm = string.Empty;
    int z = 1;

        sb.Append("<tr>");
    foreach (System.Web.UI.WebControls.ListItem item in checkboxtest.Items)
    {
        cm = item.Text;
        sb.Append("<td colspan="2"><input type=\"text\" name=\"field " + z + "\"></td>");
        z = z + 1;
    }
    sb.Append("</tr>");
    sb.Append("</table>");

    mask.InnerHtml = sb.ToString();
}

Answer 2

您需要将 tr 和 table 移出 for loop 此外，由于您需要以下内容：

来自您的输入

I need header row going horizontal across the page (based off the selections from the checkboxlist) then for each header I need an input box under the header, only one row.

将您的逻辑更改如下：

protected void btnBullDozer_Click(object sender, EventArgs e)
{
StringBuilder sb = new StringBuilder(string.Empty);
var columnname = string.Empty;
sb.Append("<table>");
sb.Append("<tr>");
sb.Append("<th>Sponsor Level</th>");
foreach (System.Web.UI.WebControls.ListItem item in checkboxtest.Items)
{
    //This loop will genrate a horizontal header for all checkbox items
    columnname = item.Text;        
    sb.Append("<th>" + item.Selected + "</th>");
}
sb.Append("</tr>"); //empty td for Sponsor Level header

var cm = string.Empty;
int z = 1;
sb.Append("<tr><td></td>");
foreach (System.Web.UI.WebControls.ListItem item in checkboxtest.Items)
{
    //This will generate a item under each header
    cm = item.Text;
    //if you want input for only selected items in checkbox uncomment following line
    /*if(!item.Selected)
      {
        sb.Append("<td></td>");
      }
      else
      {*/
       sb.Append("<td><input type=\"text\" name=\"field " + z + "\"></td>");
//    }

    z = z + 1;
}
sb.Append("</tr>");

sb.Append("</table>");

mask.InnerHtml = sb.ToString();

Note: First forLoop will generate headers for all checkbox items. Second for loop will generate inputbox for all checkbox items. Its not very good logic though, we can refactor it a little to use only one loop

Answer 3

想想HTML的逻辑。

<table>
    <tr>
        <th>Text</th>
        <th>Text</th>
        <th>Text</th>
    </tr>
    <tr>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
    </tr>
</table>

所以你想：

<table>
<tr>

First foreach loop for the headings
    <th>
    Text
    </th>
End Loop

</tr>
<tr>

Second foreach loop for the values
    <td>
    Value
    </td>
End loop

</tr>
</table>

这就是我对您的评论的理解。我知道其他人提供了实际代码，但我想回到 HTML 构造的基础知识。当您头脑清楚时，您可以将其转换为逻辑以使用循环动态创建它。

C# 动态生成 HTML Table

C# To Dynamically Generate HTML Table

html

c#

stringbuilder