C# .NET - How can I add row in html table at runtime?

Asked By azhar rahi on 06-Aug-08 04:44 PM
Hi
I am working in ASP.Net 2.0. I have to show contents from database table on a page. The database table contains the Experties which the company offers. So I need to show each Experties in each row of html table.
Can anybody tell me how can I add row in html table at runtime so each experties must be shown in each new row of html?
Any link or line of code or idea will be appreciated.
Thanks

table - Partha Mandayam replied to azhar rahi on 06-Aug-08 05:14 PM

See this link

http://bytes.com/forum/thread303814.html

The easiest way to do this is to use a Gridview - Peter Bromberg replied to azhar rahi on 06-Aug-08 07:33 PM

or in the alternative, a DataList with HTML table style rendering.

You would bind your DataTable of expertise items to your Gridview and it automatically renders as an HTML Table.  To add a row, simply add a datarow to the cached DataTable that you used for the databinding and rebind the GridView.

There is no need for  custom "Response.Write" commands to render a table when you have total control with databinding.

Adding row at runtime - Binny ch replied to azhar rahi on 06-Aug-08 10:40 PM

<html>
<head>
<script language="javascript">
function AddRow(){
var table = document.getElementById("myTable");
if (!table) throw "Table not found";
var row = table.insertRow(-1); //append at the end
var cell1 = row.insertCell(-1);
var cell2 = row.insertCell(-1);
cell1.innerHTML = '2';
cell2.innerHTML = 'test';
}
</script>
</head>
<body>
<table border="1" id="myTable">
<tr><td>1</td><td>sam</td></tr>
</table>
<input type="button" onClick="AddRow();" value="Add Row">
</body>
</html>

hi - Binny ch replied to azhar rahi on 06-Aug-08 10:41 PM

Hi Azharrahi,

User repeater control to solve your problem, where make change in the are of " <%#Eval(" Your ITEM here") %"


<asp:Repeater ID="Repeater3" runat="server" DataSourceID="SqlDataSource3">

<HeaderTemplate>

 <table cellpadding="0" cellspacing="0">

</HeaderTemplate>

<ItemTemplate>


 

<tr>

<td valign="top" align="left">

 

<%#Eval(" Your ITEM here") %>

</td>

</tr>

 


</ItemTemplate>

<FooterTemplate>

</table>

</FooterTemplate>

 

</asp:Repeater>

 

I hope this will help you,

Go thr this code - Sagar P replied to azhar rahi on 06-Aug-08 11:56 PM

YOu can use gridview for this also. Just attach a datatable to gridview it will show you all the records in table format.

See this code to add a Row in a Table.

 //Instantiate Row Object and Cell Object

       

        HtmlTableRow htRow = new HtmlTableRow();

        HtmlTableCell htCell = new HtmlTableCell();       

 

        //Set the sytle of a table

       

        table1.BgColor = "#FCDDFE";

        table1.Align = "left";

        table1.Border = 1;

        table1.Attributes["Style"] = "font-family:Verdana;font-size:11px;font-style:italic;";

 

        //Add Text to cell and add Cell to Row

 

        htCell.InnerText = "This is Implementation of HTML Control";

        htRow.Cells.Add(htCell);

        table1.Rows.Add(htRow);

 

        //Add Second Row in a Table

       

        htRow = new HtmlTableRow();

        htCell = new HtmlTableCell();

 

        TextBox txttext = new TextBox();

        txttext.Visible = true;

        txttext.Text = "Inside Cell";

       

        htCell.Controls.Add(txttext);

        htRow.Cells.Add(htCell);

        table1.Rows.Add(htRow);

 

Go thr these links also;

http://www.devasp.net/net/articles/display/681.html

 

http://programming.top54u.com/post/ASP-Net-C-sharp-Code-to-Create-Dynamic-Tables.aspx

 

http://www.java2s.com/Code/ASP/HTML-Control/HTMLTableaddrowVBnet.htm

 

Best Luck!!!!!!!!!!!!
Sujit.

hmm - Santhosh N replied to azhar rahi on 07-Aug-08 12:45 AM

You can construct the table html as string and print on the webpage by using Response.write

But, the good way of handling this is to use either of databinding controls like Repeater, Datalist or Datagrid...As these has the automatic databinding and flexible to do...

cheers

Use this... - Atul Shinde replied to azhar rahi on 07-Aug-08 03:25 AM

U can not be able to add row at runtime for html table at server side. U can add rows at runtime at client side.

Here is the code:

<html>
<head>
<script language="javascript">
function AddRow(){
var table = document.getElementById("myTable");
if (!table) throw "Table not found";
var row = table.insertRow(-1); //append at the end
var cell1 = row.insertCell(-1);
var cell2 = row.insertCell(-1);
cell1.innerHTML = '2';
cell2.innerHTML = 'test';
}
</script>
</head>
<body>
<table border="1" id="myTable">
<tr><td>1</td><td>sam</td></tr>
</table>
<input type="button" onClick="AddRow();" value="Add Row">
</body>
</html>

Can I show two rows in Repeater? - azhar rahi replied to Binny ch on 08-Aug-08 04:48 PM
Thanks for the help. Well can I show two rows in Repeater control ? One row contains the Column Expertie from Experties Table and Second is for image.
Thanks