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

Andrew Truckle · Accepted Answer · 2018-01-31 14:48:19Z

2

Think about the logic of 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>

So you want to:

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

That is how I understand your comments. I know others have provided actual code but I wanted to go back to basics of HTML construct. When you have that clear in your mind you can convert it to logic to create it dynamically with loops.

answered Jan 31, 2018 at 14:48

Andrew Truckle

19.4k17 gold badges93 silver badges231 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

SSD · Accepted Answer · 2018-01-31 15:03:48Z

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

edited Jan 31, 2018 at 15:03

answered Jan 31, 2018 at 14:28

SSD

1,4012 gold badges14 silver badges20 bronze badges

9 Comments

BoJack Horseman Over a year ago

can you show full syntax? And keep the one outside the loop or remove it?

BoJack Horseman Over a year ago

Using the updated code, the text boxes are still stacked vertical on top of each other

SSD Over a year ago

Sorry.. your Table also needs to be out of loop.. edited now

BoJack Horseman Over a year ago

moving the table outside the loop everything is still horizontal

SSD Over a year ago

Can you add picture of output in your questions? code seems okay now

|

AlleXyS · Accepted Answer · 2018-01-31 14:41:26Z

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

edited Jan 31, 2018 at 14:41

answered Jan 31, 2018 at 14:28

AlleXyS

2,5983 gold badges20 silver badges44 bronze badges

9 Comments

BoJack Horseman Over a year ago

and comment out the <tr> I have outside of the for each loop or leave it in play? Can you show full syntax?

BoJack Horseman Over a year ago

This stacks everything vertical on the page - not horizontal

AlleXyS Over a year ago

@BoJackHorseman My foul. So, you need 2 rows, one with headers (th), one with values (td). Edited again, hope this is a solution

BoJack Horseman Over a year ago

Yes - that is what I am after. But for some reason syntax is not adding header based off selection from checkboxlist?

AlleXyS Over a year ago

try with columnname instead item.Selected.

|

Collectives™ on Stack Overflow

C# To Dynamically Generate HTML Table

3 Answers 3

Comments

9 Comments

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

9 Comments

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related