Adding rows dynamically to a HTML table












2















I have a asp.net web site that contains some tables. However these are not asp:Table i.e. they are simple HTML tables built this way:



 <table><tr><td></td></tr></table> 


Now I would like to know if it's possible to add rows dynamically to this table from the code behind (i.e. C#) and if yes, how do I go about doing it?










share|improve this question

























  • Web forms or MVC. I would suggest doing it in MVC for this type of thing, or if you are stuck with Web forms then make the table runat="server"

    – Daniel Casserly
    Jul 17 '12 at 9:10











  • MVC . Its pretty simple to add rows to a asp:Table but no idea doing it for HTML tables .

    – Saiesh
    Jul 17 '12 at 9:13











  • refer to this post:- stackoverflow.com/questions/171027/add-table-row-in-jquery

    – Sandeep Tawaniya
    Jul 17 '12 at 9:25


















2















I have a asp.net web site that contains some tables. However these are not asp:Table i.e. they are simple HTML tables built this way:



 <table><tr><td></td></tr></table> 


Now I would like to know if it's possible to add rows dynamically to this table from the code behind (i.e. C#) and if yes, how do I go about doing it?










share|improve this question

























  • Web forms or MVC. I would suggest doing it in MVC for this type of thing, or if you are stuck with Web forms then make the table runat="server"

    – Daniel Casserly
    Jul 17 '12 at 9:10











  • MVC . Its pretty simple to add rows to a asp:Table but no idea doing it for HTML tables .

    – Saiesh
    Jul 17 '12 at 9:13











  • refer to this post:- stackoverflow.com/questions/171027/add-table-row-in-jquery

    – Sandeep Tawaniya
    Jul 17 '12 at 9:25
















2












2








2








I have a asp.net web site that contains some tables. However these are not asp:Table i.e. they are simple HTML tables built this way:



 <table><tr><td></td></tr></table> 


Now I would like to know if it's possible to add rows dynamically to this table from the code behind (i.e. C#) and if yes, how do I go about doing it?










share|improve this question
















I have a asp.net web site that contains some tables. However these are not asp:Table i.e. they are simple HTML tables built this way:



 <table><tr><td></td></tr></table> 


Now I would like to know if it's possible to add rows dynamically to this table from the code behind (i.e. C#) and if yes, how do I go about doing it?







c# asp.net html-table






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Apr 21 '17 at 8:42









Brian Tompsett - 汤莱恩

4,2421339102




4,2421339102










asked Jul 17 '12 at 9:08









SaieshSaiesh

5011522




5011522













  • Web forms or MVC. I would suggest doing it in MVC for this type of thing, or if you are stuck with Web forms then make the table runat="server"

    – Daniel Casserly
    Jul 17 '12 at 9:10











  • MVC . Its pretty simple to add rows to a asp:Table but no idea doing it for HTML tables .

    – Saiesh
    Jul 17 '12 at 9:13











  • refer to this post:- stackoverflow.com/questions/171027/add-table-row-in-jquery

    – Sandeep Tawaniya
    Jul 17 '12 at 9:25





















  • Web forms or MVC. I would suggest doing it in MVC for this type of thing, or if you are stuck with Web forms then make the table runat="server"

    – Daniel Casserly
    Jul 17 '12 at 9:10











  • MVC . Its pretty simple to add rows to a asp:Table but no idea doing it for HTML tables .

    – Saiesh
    Jul 17 '12 at 9:13











  • refer to this post:- stackoverflow.com/questions/171027/add-table-row-in-jquery

    – Sandeep Tawaniya
    Jul 17 '12 at 9:25



















Web forms or MVC. I would suggest doing it in MVC for this type of thing, or if you are stuck with Web forms then make the table runat="server"

– Daniel Casserly
Jul 17 '12 at 9:10





Web forms or MVC. I would suggest doing it in MVC for this type of thing, or if you are stuck with Web forms then make the table runat="server"

– Daniel Casserly
Jul 17 '12 at 9:10













MVC . Its pretty simple to add rows to a asp:Table but no idea doing it for HTML tables .

– Saiesh
Jul 17 '12 at 9:13





MVC . Its pretty simple to add rows to a asp:Table but no idea doing it for HTML tables .

– Saiesh
Jul 17 '12 at 9:13













refer to this post:- stackoverflow.com/questions/171027/add-table-row-in-jquery

– Sandeep Tawaniya
Jul 17 '12 at 9:25







refer to this post:- stackoverflow.com/questions/171027/add-table-row-in-jquery

– Sandeep Tawaniya
Jul 17 '12 at 9:25














5 Answers
5






active

oldest

votes


















2














It's been a while but there is the repeater-control in ASP.NET Webforms for this kind of stuff.



Here is a nice article introducing this conept: Data Repeater Controls in ASP.NET



I think this will be easier for you than hacking this with AJAX/JScript



Aside from this: Daniel Casserly is right - this is very easy if you do it in MVC (even easier if you use Razor-Syntax), as it would translate do something like:



<table>
@foreach (var item in Model)
{
<tr>
<td>@item.Name</td>
... whatever you need here ...
</tr>
}
</table>





share|improve this answer



















  • 1





    I knew somebody less lazy than me would write the Razor code. Thanks Carsten :-)

    – Daniel Casserly
    Jul 17 '12 at 9:36



















3














you can give it an Id and Set runat="server" attribute and use it from code behind using Id you gave it



System.Web.UI.HtmlControls.HtmlTableRow r=new System.Web.UI.HtmlControls.HtmlTableRow();
System.Web.UI.HtmlControls.HtmlTableCell c = new System.Web.UI.HtmlControls.HtmlTableCell();
c.InnerText = "New Cell";
r.Cells.Add(c);
T.Rows.Add(r);


where T is the Id of your table






share|improve this answer
























  • How do i add the css class to be associated with each row or element ? There seems to be no functionality to do that for these row and cell elements .

    – Saiesh
    Jul 17 '12 at 11:21











  • there is Cell.style property I guess this is where styles are added, I never tried it though

    – Maha Khairy
    Jul 17 '12 at 11:41



















1














You can do this with JQuery but for that you will need to give and Id or class or just search for the table array and then inject rows to it






share|improve this answer
























  • Oh yes , an ID can definitely be given . Is there any way i can do it without using JQuery ?

    – Saiesh
    Jul 17 '12 at 9:16



















1














yes you can:
follow this link:Adding new rows to HTML table dynamically



and this:How Dynamically Add Rows into ASP.NET Table using C#






share|improve this answer































    0














    I think its better to create the entire HTML table from the code behind.
    For this we can add a literal and use it in the code behind to add a table structure from the code behind.



    e.g. Lets make an HTML table of Birds detail.
    Just to keep explanation short I have not included the data table part filled with birds detail.



    if (dtBirdsDetail.Rows.Count > 0)
    {
    litBirdsTable.Text = "<center><table id='tbldata' cellspacing='0' cellpadding='1' border='1' style='border-collapse: collapse;'>" + System.Environment.NewLine;
    litBirdsTable.Text += "<tr>";

    //add datatable columns to html table as heading
    for (int liColumnIndex = 0; liColumnIndex < dtBirdsDetail.Columns.Count;liColumnIndex++)
    {
    litBirdsTable.Text += "<th>" + dtBirdsDetail.Columns[liColumnIndex].ColumnName
    + "</th>" + System.Environment.NewLine;
    }
    litBirdsTable.Text += System.Environment.NewLine + "</tr>";

    //add datatable rows to html table
    for (int liRowIndex = 0; liRowIndex < dtBirdsDetail.Rows.Count; liRowIndex++)
    {
    litBirdsTable.Text += "<tr>";
    litBirdsTable.Text += "<td>" + dtBirdsDetail.Rows[liRowIndex]["ID"] + "</td>" +
    System.Environment.NewLine;
    litBirdsTable.Text += "<td>" + dtBirdsDetail.Rows[liRowIndex]["BirdName"] + "
    </td>" + System.Environment.NewLine;
    litBirdsTable.Text += "<td>" + dtBirdsDetail.Rows[liRowIndex]["TypeOfBird"] + "
    </td>" + System.Environment.NewLine;
    litBirdsTable.Text += "<td>" + dtBirdsDetail.Rows[liRowIndex]["ScientificName"]
    + "</td>" + System.Environment.NewLine;
    litBirdsTable.Text += "</tr>";
    }
    litBirdsTable.Text += "</table></center>";
    }


    For detailed explanation, visit this link:



    http://codevariation.blogspot.com/2018/03/html-table-design-with-dynamic-data.html






    share|improve this answer

























      Your Answer






      StackExchange.ifUsing("editor", function () {
      StackExchange.using("externalEditor", function () {
      StackExchange.using("snippets", function () {
      StackExchange.snippets.init();
      });
      });
      }, "code-snippets");

      StackExchange.ready(function() {
      var channelOptions = {
      tags: "".split(" "),
      id: "1"
      };
      initTagRenderer("".split(" "), "".split(" "), channelOptions);

      StackExchange.using("externalEditor", function() {
      // Have to fire editor after snippets, if snippets enabled
      if (StackExchange.settings.snippets.snippetsEnabled) {
      StackExchange.using("snippets", function() {
      createEditor();
      });
      }
      else {
      createEditor();
      }
      });

      function createEditor() {
      StackExchange.prepareEditor({
      heartbeatType: 'answer',
      autoActivateHeartbeat: false,
      convertImagesToLinks: true,
      noModals: true,
      showLowRepImageUploadWarning: true,
      reputationToPostImages: 10,
      bindNavPrevention: true,
      postfix: "",
      imageUploader: {
      brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
      contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
      allowUrls: true
      },
      onDemand: true,
      discardSelector: ".discard-answer"
      ,immediatelyShowMarkdownHelp:true
      });


      }
      });














      draft saved

      draft discarded


















      StackExchange.ready(
      function () {
      StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f11519318%2fadding-rows-dynamically-to-a-html-table%23new-answer', 'question_page');
      }
      );

      Post as a guest















      Required, but never shown

























      5 Answers
      5






      active

      oldest

      votes








      5 Answers
      5






      active

      oldest

      votes









      active

      oldest

      votes






      active

      oldest

      votes









      2














      It's been a while but there is the repeater-control in ASP.NET Webforms for this kind of stuff.



      Here is a nice article introducing this conept: Data Repeater Controls in ASP.NET



      I think this will be easier for you than hacking this with AJAX/JScript



      Aside from this: Daniel Casserly is right - this is very easy if you do it in MVC (even easier if you use Razor-Syntax), as it would translate do something like:



      <table>
      @foreach (var item in Model)
      {
      <tr>
      <td>@item.Name</td>
      ... whatever you need here ...
      </tr>
      }
      </table>





      share|improve this answer



















      • 1





        I knew somebody less lazy than me would write the Razor code. Thanks Carsten :-)

        – Daniel Casserly
        Jul 17 '12 at 9:36
















      2














      It's been a while but there is the repeater-control in ASP.NET Webforms for this kind of stuff.



      Here is a nice article introducing this conept: Data Repeater Controls in ASP.NET



      I think this will be easier for you than hacking this with AJAX/JScript



      Aside from this: Daniel Casserly is right - this is very easy if you do it in MVC (even easier if you use Razor-Syntax), as it would translate do something like:



      <table>
      @foreach (var item in Model)
      {
      <tr>
      <td>@item.Name</td>
      ... whatever you need here ...
      </tr>
      }
      </table>





      share|improve this answer



















      • 1





        I knew somebody less lazy than me would write the Razor code. Thanks Carsten :-)

        – Daniel Casserly
        Jul 17 '12 at 9:36














      2












      2








      2







      It's been a while but there is the repeater-control in ASP.NET Webforms for this kind of stuff.



      Here is a nice article introducing this conept: Data Repeater Controls in ASP.NET



      I think this will be easier for you than hacking this with AJAX/JScript



      Aside from this: Daniel Casserly is right - this is very easy if you do it in MVC (even easier if you use Razor-Syntax), as it would translate do something like:



      <table>
      @foreach (var item in Model)
      {
      <tr>
      <td>@item.Name</td>
      ... whatever you need here ...
      </tr>
      }
      </table>





      share|improve this answer













      It's been a while but there is the repeater-control in ASP.NET Webforms for this kind of stuff.



      Here is a nice article introducing this conept: Data Repeater Controls in ASP.NET



      I think this will be easier for you than hacking this with AJAX/JScript



      Aside from this: Daniel Casserly is right - this is very easy if you do it in MVC (even easier if you use Razor-Syntax), as it would translate do something like:



      <table>
      @foreach (var item in Model)
      {
      <tr>
      <td>@item.Name</td>
      ... whatever you need here ...
      </tr>
      }
      </table>






      share|improve this answer












      share|improve this answer



      share|improve this answer










      answered Jul 17 '12 at 9:13









      CarstenCarsten

      44.3k671104




      44.3k671104








      • 1





        I knew somebody less lazy than me would write the Razor code. Thanks Carsten :-)

        – Daniel Casserly
        Jul 17 '12 at 9:36














      • 1





        I knew somebody less lazy than me would write the Razor code. Thanks Carsten :-)

        – Daniel Casserly
        Jul 17 '12 at 9:36








      1




      1





      I knew somebody less lazy than me would write the Razor code. Thanks Carsten :-)

      – Daniel Casserly
      Jul 17 '12 at 9:36





      I knew somebody less lazy than me would write the Razor code. Thanks Carsten :-)

      – Daniel Casserly
      Jul 17 '12 at 9:36













      3














      you can give it an Id and Set runat="server" attribute and use it from code behind using Id you gave it



      System.Web.UI.HtmlControls.HtmlTableRow r=new System.Web.UI.HtmlControls.HtmlTableRow();
      System.Web.UI.HtmlControls.HtmlTableCell c = new System.Web.UI.HtmlControls.HtmlTableCell();
      c.InnerText = "New Cell";
      r.Cells.Add(c);
      T.Rows.Add(r);


      where T is the Id of your table






      share|improve this answer
























      • How do i add the css class to be associated with each row or element ? There seems to be no functionality to do that for these row and cell elements .

        – Saiesh
        Jul 17 '12 at 11:21











      • there is Cell.style property I guess this is where styles are added, I never tried it though

        – Maha Khairy
        Jul 17 '12 at 11:41
















      3














      you can give it an Id and Set runat="server" attribute and use it from code behind using Id you gave it



      System.Web.UI.HtmlControls.HtmlTableRow r=new System.Web.UI.HtmlControls.HtmlTableRow();
      System.Web.UI.HtmlControls.HtmlTableCell c = new System.Web.UI.HtmlControls.HtmlTableCell();
      c.InnerText = "New Cell";
      r.Cells.Add(c);
      T.Rows.Add(r);


      where T is the Id of your table






      share|improve this answer
























      • How do i add the css class to be associated with each row or element ? There seems to be no functionality to do that for these row and cell elements .

        – Saiesh
        Jul 17 '12 at 11:21











      • there is Cell.style property I guess this is where styles are added, I never tried it though

        – Maha Khairy
        Jul 17 '12 at 11:41














      3












      3








      3







      you can give it an Id and Set runat="server" attribute and use it from code behind using Id you gave it



      System.Web.UI.HtmlControls.HtmlTableRow r=new System.Web.UI.HtmlControls.HtmlTableRow();
      System.Web.UI.HtmlControls.HtmlTableCell c = new System.Web.UI.HtmlControls.HtmlTableCell();
      c.InnerText = "New Cell";
      r.Cells.Add(c);
      T.Rows.Add(r);


      where T is the Id of your table






      share|improve this answer













      you can give it an Id and Set runat="server" attribute and use it from code behind using Id you gave it



      System.Web.UI.HtmlControls.HtmlTableRow r=new System.Web.UI.HtmlControls.HtmlTableRow();
      System.Web.UI.HtmlControls.HtmlTableCell c = new System.Web.UI.HtmlControls.HtmlTableCell();
      c.InnerText = "New Cell";
      r.Cells.Add(c);
      T.Rows.Add(r);


      where T is the Id of your table







      share|improve this answer












      share|improve this answer



      share|improve this answer










      answered Jul 17 '12 at 10:29









      Maha KhairyMaha Khairy

      302513




      302513













      • How do i add the css class to be associated with each row or element ? There seems to be no functionality to do that for these row and cell elements .

        – Saiesh
        Jul 17 '12 at 11:21











      • there is Cell.style property I guess this is where styles are added, I never tried it though

        – Maha Khairy
        Jul 17 '12 at 11:41



















      • How do i add the css class to be associated with each row or element ? There seems to be no functionality to do that for these row and cell elements .

        – Saiesh
        Jul 17 '12 at 11:21











      • there is Cell.style property I guess this is where styles are added, I never tried it though

        – Maha Khairy
        Jul 17 '12 at 11:41

















      How do i add the css class to be associated with each row or element ? There seems to be no functionality to do that for these row and cell elements .

      – Saiesh
      Jul 17 '12 at 11:21





      How do i add the css class to be associated with each row or element ? There seems to be no functionality to do that for these row and cell elements .

      – Saiesh
      Jul 17 '12 at 11:21













      there is Cell.style property I guess this is where styles are added, I never tried it though

      – Maha Khairy
      Jul 17 '12 at 11:41





      there is Cell.style property I guess this is where styles are added, I never tried it though

      – Maha Khairy
      Jul 17 '12 at 11:41











      1














      You can do this with JQuery but for that you will need to give and Id or class or just search for the table array and then inject rows to it






      share|improve this answer
























      • Oh yes , an ID can definitely be given . Is there any way i can do it without using JQuery ?

        – Saiesh
        Jul 17 '12 at 9:16
















      1














      You can do this with JQuery but for that you will need to give and Id or class or just search for the table array and then inject rows to it






      share|improve this answer
























      • Oh yes , an ID can definitely be given . Is there any way i can do it without using JQuery ?

        – Saiesh
        Jul 17 '12 at 9:16














      1












      1








      1







      You can do this with JQuery but for that you will need to give and Id or class or just search for the table array and then inject rows to it






      share|improve this answer













      You can do this with JQuery but for that you will need to give and Id or class or just search for the table array and then inject rows to it







      share|improve this answer












      share|improve this answer



      share|improve this answer










      answered Jul 17 '12 at 9:10









      HatSoftHatSoft

      9,66231943




      9,66231943













      • Oh yes , an ID can definitely be given . Is there any way i can do it without using JQuery ?

        – Saiesh
        Jul 17 '12 at 9:16



















      • Oh yes , an ID can definitely be given . Is there any way i can do it without using JQuery ?

        – Saiesh
        Jul 17 '12 at 9:16

















      Oh yes , an ID can definitely be given . Is there any way i can do it without using JQuery ?

      – Saiesh
      Jul 17 '12 at 9:16





      Oh yes , an ID can definitely be given . Is there any way i can do it without using JQuery ?

      – Saiesh
      Jul 17 '12 at 9:16











      1














      yes you can:
      follow this link:Adding new rows to HTML table dynamically



      and this:How Dynamically Add Rows into ASP.NET Table using C#






      share|improve this answer




























        1














        yes you can:
        follow this link:Adding new rows to HTML table dynamically



        and this:How Dynamically Add Rows into ASP.NET Table using C#






        share|improve this answer


























          1












          1








          1







          yes you can:
          follow this link:Adding new rows to HTML table dynamically



          and this:How Dynamically Add Rows into ASP.NET Table using C#






          share|improve this answer













          yes you can:
          follow this link:Adding new rows to HTML table dynamically



          and this:How Dynamically Add Rows into ASP.NET Table using C#







          share|improve this answer












          share|improve this answer



          share|improve this answer










          answered Jul 17 '12 at 9:14









          KF2KF2

          6,90462970




          6,90462970























              0














              I think its better to create the entire HTML table from the code behind.
              For this we can add a literal and use it in the code behind to add a table structure from the code behind.



              e.g. Lets make an HTML table of Birds detail.
              Just to keep explanation short I have not included the data table part filled with birds detail.



              if (dtBirdsDetail.Rows.Count > 0)
              {
              litBirdsTable.Text = "<center><table id='tbldata' cellspacing='0' cellpadding='1' border='1' style='border-collapse: collapse;'>" + System.Environment.NewLine;
              litBirdsTable.Text += "<tr>";

              //add datatable columns to html table as heading
              for (int liColumnIndex = 0; liColumnIndex < dtBirdsDetail.Columns.Count;liColumnIndex++)
              {
              litBirdsTable.Text += "<th>" + dtBirdsDetail.Columns[liColumnIndex].ColumnName
              + "</th>" + System.Environment.NewLine;
              }
              litBirdsTable.Text += System.Environment.NewLine + "</tr>";

              //add datatable rows to html table
              for (int liRowIndex = 0; liRowIndex < dtBirdsDetail.Rows.Count; liRowIndex++)
              {
              litBirdsTable.Text += "<tr>";
              litBirdsTable.Text += "<td>" + dtBirdsDetail.Rows[liRowIndex]["ID"] + "</td>" +
              System.Environment.NewLine;
              litBirdsTable.Text += "<td>" + dtBirdsDetail.Rows[liRowIndex]["BirdName"] + "
              </td>" + System.Environment.NewLine;
              litBirdsTable.Text += "<td>" + dtBirdsDetail.Rows[liRowIndex]["TypeOfBird"] + "
              </td>" + System.Environment.NewLine;
              litBirdsTable.Text += "<td>" + dtBirdsDetail.Rows[liRowIndex]["ScientificName"]
              + "</td>" + System.Environment.NewLine;
              litBirdsTable.Text += "</tr>";
              }
              litBirdsTable.Text += "</table></center>";
              }


              For detailed explanation, visit this link:



              http://codevariation.blogspot.com/2018/03/html-table-design-with-dynamic-data.html






              share|improve this answer






























                0














                I think its better to create the entire HTML table from the code behind.
                For this we can add a literal and use it in the code behind to add a table structure from the code behind.



                e.g. Lets make an HTML table of Birds detail.
                Just to keep explanation short I have not included the data table part filled with birds detail.



                if (dtBirdsDetail.Rows.Count > 0)
                {
                litBirdsTable.Text = "<center><table id='tbldata' cellspacing='0' cellpadding='1' border='1' style='border-collapse: collapse;'>" + System.Environment.NewLine;
                litBirdsTable.Text += "<tr>";

                //add datatable columns to html table as heading
                for (int liColumnIndex = 0; liColumnIndex < dtBirdsDetail.Columns.Count;liColumnIndex++)
                {
                litBirdsTable.Text += "<th>" + dtBirdsDetail.Columns[liColumnIndex].ColumnName
                + "</th>" + System.Environment.NewLine;
                }
                litBirdsTable.Text += System.Environment.NewLine + "</tr>";

                //add datatable rows to html table
                for (int liRowIndex = 0; liRowIndex < dtBirdsDetail.Rows.Count; liRowIndex++)
                {
                litBirdsTable.Text += "<tr>";
                litBirdsTable.Text += "<td>" + dtBirdsDetail.Rows[liRowIndex]["ID"] + "</td>" +
                System.Environment.NewLine;
                litBirdsTable.Text += "<td>" + dtBirdsDetail.Rows[liRowIndex]["BirdName"] + "
                </td>" + System.Environment.NewLine;
                litBirdsTable.Text += "<td>" + dtBirdsDetail.Rows[liRowIndex]["TypeOfBird"] + "
                </td>" + System.Environment.NewLine;
                litBirdsTable.Text += "<td>" + dtBirdsDetail.Rows[liRowIndex]["ScientificName"]
                + "</td>" + System.Environment.NewLine;
                litBirdsTable.Text += "</tr>";
                }
                litBirdsTable.Text += "</table></center>";
                }


                For detailed explanation, visit this link:



                http://codevariation.blogspot.com/2018/03/html-table-design-with-dynamic-data.html






                share|improve this answer




























                  0












                  0








                  0







                  I think its better to create the entire HTML table from the code behind.
                  For this we can add a literal and use it in the code behind to add a table structure from the code behind.



                  e.g. Lets make an HTML table of Birds detail.
                  Just to keep explanation short I have not included the data table part filled with birds detail.



                  if (dtBirdsDetail.Rows.Count > 0)
                  {
                  litBirdsTable.Text = "<center><table id='tbldata' cellspacing='0' cellpadding='1' border='1' style='border-collapse: collapse;'>" + System.Environment.NewLine;
                  litBirdsTable.Text += "<tr>";

                  //add datatable columns to html table as heading
                  for (int liColumnIndex = 0; liColumnIndex < dtBirdsDetail.Columns.Count;liColumnIndex++)
                  {
                  litBirdsTable.Text += "<th>" + dtBirdsDetail.Columns[liColumnIndex].ColumnName
                  + "</th>" + System.Environment.NewLine;
                  }
                  litBirdsTable.Text += System.Environment.NewLine + "</tr>";

                  //add datatable rows to html table
                  for (int liRowIndex = 0; liRowIndex < dtBirdsDetail.Rows.Count; liRowIndex++)
                  {
                  litBirdsTable.Text += "<tr>";
                  litBirdsTable.Text += "<td>" + dtBirdsDetail.Rows[liRowIndex]["ID"] + "</td>" +
                  System.Environment.NewLine;
                  litBirdsTable.Text += "<td>" + dtBirdsDetail.Rows[liRowIndex]["BirdName"] + "
                  </td>" + System.Environment.NewLine;
                  litBirdsTable.Text += "<td>" + dtBirdsDetail.Rows[liRowIndex]["TypeOfBird"] + "
                  </td>" + System.Environment.NewLine;
                  litBirdsTable.Text += "<td>" + dtBirdsDetail.Rows[liRowIndex]["ScientificName"]
                  + "</td>" + System.Environment.NewLine;
                  litBirdsTable.Text += "</tr>";
                  }
                  litBirdsTable.Text += "</table></center>";
                  }


                  For detailed explanation, visit this link:



                  http://codevariation.blogspot.com/2018/03/html-table-design-with-dynamic-data.html






                  share|improve this answer















                  I think its better to create the entire HTML table from the code behind.
                  For this we can add a literal and use it in the code behind to add a table structure from the code behind.



                  e.g. Lets make an HTML table of Birds detail.
                  Just to keep explanation short I have not included the data table part filled with birds detail.



                  if (dtBirdsDetail.Rows.Count > 0)
                  {
                  litBirdsTable.Text = "<center><table id='tbldata' cellspacing='0' cellpadding='1' border='1' style='border-collapse: collapse;'>" + System.Environment.NewLine;
                  litBirdsTable.Text += "<tr>";

                  //add datatable columns to html table as heading
                  for (int liColumnIndex = 0; liColumnIndex < dtBirdsDetail.Columns.Count;liColumnIndex++)
                  {
                  litBirdsTable.Text += "<th>" + dtBirdsDetail.Columns[liColumnIndex].ColumnName
                  + "</th>" + System.Environment.NewLine;
                  }
                  litBirdsTable.Text += System.Environment.NewLine + "</tr>";

                  //add datatable rows to html table
                  for (int liRowIndex = 0; liRowIndex < dtBirdsDetail.Rows.Count; liRowIndex++)
                  {
                  litBirdsTable.Text += "<tr>";
                  litBirdsTable.Text += "<td>" + dtBirdsDetail.Rows[liRowIndex]["ID"] + "</td>" +
                  System.Environment.NewLine;
                  litBirdsTable.Text += "<td>" + dtBirdsDetail.Rows[liRowIndex]["BirdName"] + "
                  </td>" + System.Environment.NewLine;
                  litBirdsTable.Text += "<td>" + dtBirdsDetail.Rows[liRowIndex]["TypeOfBird"] + "
                  </td>" + System.Environment.NewLine;
                  litBirdsTable.Text += "<td>" + dtBirdsDetail.Rows[liRowIndex]["ScientificName"]
                  + "</td>" + System.Environment.NewLine;
                  litBirdsTable.Text += "</tr>";
                  }
                  litBirdsTable.Text += "</table></center>";
                  }


                  For detailed explanation, visit this link:



                  http://codevariation.blogspot.com/2018/03/html-table-design-with-dynamic-data.html







                  share|improve this answer














                  share|improve this answer



                  share|improve this answer








                  edited Jan 3 at 9:03









                  Yogesh Rathi

                  3,91943260




                  3,91943260










                  answered Jan 3 at 7:50









                  Shantilal SutharShantilal Suthar

                  111




                  111






























                      draft saved

                      draft discarded




















































                      Thanks for contributing an answer to Stack Overflow!


                      • Please be sure to answer the question. Provide details and share your research!

                      But avoid



                      • Asking for help, clarification, or responding to other answers.

                      • Making statements based on opinion; back them up with references or personal experience.


                      To learn more, see our tips on writing great answers.




                      draft saved


                      draft discarded














                      StackExchange.ready(
                      function () {
                      StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f11519318%2fadding-rows-dynamically-to-a-html-table%23new-answer', 'question_page');
                      }
                      );

                      Post as a guest















                      Required, but never shown





















































                      Required, but never shown














                      Required, but never shown












                      Required, but never shown







                      Required, but never shown

































                      Required, but never shown














                      Required, but never shown












                      Required, but never shown







                      Required, but never shown







                      Popular posts from this blog

                      Mossoró

                      Error while reading .h5 file using the rhdf5 package in R

                      Pushsharp Apns notification error: 'InvalidToken'