我正在尝试动态生成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个空文本框在下面进行数据输入
答案 0 :(得分:2)
考虑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构造的基础知识。当你清楚地了解它时,可以将它转换为逻辑,用循环动态创建它。
答案 1 :(得分: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();
}
答案 2 :(得分:1)
您需要将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循环将为所有复选框项生成输入框。虽然它不是很好的逻辑,我们可以稍微重构它只使用一个循环