C# To Dynamically Generate HTML Table

Question

I am attempting to Dynamically generate an HTML Table. What I am after is to have a header row and a second row of textboxes under the header row (all aligned horizontally across the page). I attempted this syntax - however it ignores the values that are selected in the checkboxlist, and the textboxes for input are stacked on top of each other instead of horizontal.

Can someone right the errors in my ways?

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

Hypothetical of what my desired grid should look like - let's say that the user selected 4 options from the checkboxlist then I would want 5 headers (Sponsor Level, and the names selected) then one row with 5 empty textboxes underneath for the data entry

Answer 1

You need to move tr and table out of for loop Also, since you need following:

Input from you

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.

Changed your logic as follows:

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