Question

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

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

    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个标题（赞助商级别和选择的名称）然后一行有5个空文本框在下面进行数据输入

Answer 1

考虑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构造的基础知识。当你清楚地了解它时，可以将它转换为逻辑，用循环动态创建它。

Answer 2

    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 3

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

您的输入

我需要在页面上横向排列标题行（基于复选框列表中的选择）然后对于每个标题我需要在标题下面的输入框，只有一行。

更改逻辑如下：

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

注意：首先forLoop将为所有复选框项生成标题。第二个for循环将为所有复选框项生成输入框。虽然它不是很好的逻辑，我们可以稍微重构它只使用一个循环

C＃动态生成HTML表

3 个答案: