Dynamic table generation by JavaScript, Accessing row and data of dynamic table in C# code

 

<div>

 

<input id="txtName" type="text"/>

<input id="txtAdd" type="text"/>

<input id="txtCity" type="text"/>

 

<input id="btnAdd" type="button" value="Add" onclick="AddClick();" />

<input id="btnRemove" type="button" value="Remove" onclick="RemoveClick(this);"/><br />

<table id="tblInfo" runat="server" style="width: 474px" >

</table>

</div>

 

need a JAva script which can add, delete , Edit the Tabel in for the text box value User Specifies

and then on Submit, this table along with its Data(tr and td) accessible to the C# code

0
mohit
7/29/2008 2:14:40 PM
asp.net.client-side 24353 articles. 1 followers. Follow

10 Replies
3349 Views

Similar Articles

[PageSpeed] 2

 You can call a web service and get results through javascript. Once you have results you can create this dynamic tables using javascript as below.

  

for(var k=0;kresult.lengt;k++)
{
var html ="";
                 html = html + "&lt;div style=width:100%'>"+
"&lt;div class='squarebox'>"+
"&lt;div class='squareboxgradientcaption' style='height:21px; cursor: pointer;text-align:left' onclick='togglePannelStatus(this.nextSibling)'>"+
"&lt;div class='arrow'>"+ results[k].Question +"&lt;/div>"+
//"<div style=float: left;color:black; font-family:verdana; font-size:9.6pt; font-weight:bold>"+ results[k].Question +"</div>"+
"&lt;div style='float: right; vertical-align: middle'>"+
//"<img src='Img/expand.gif' width='13' height='14' border='0' alt='Show/Hide' title='Show/Hide' />"+
"&lt;/div>"+
"&lt;/div>"+
"&lt;div class='squareboxcontent' style='display:none; Height:100%'>"+
"&lt;br />"+ results[k].Answer +
"&lt;/div>"+
"&lt;/div>"+
//"<img width='100%' height='20' alt='' src='Img/shadow.gif' />"+
"&lt;/div><br />"

var temp = temp + html;

}
 
Finally you can append temp to any div's inner html as below.
  searchResults.innerHTML = temp; 
 
For calling a web service using javascript you can refer this link.
  Call Web Service Using Javascript

A2ZDotNet

0
keyrav
7/29/2008 2:33:15 PM

need a JAva script which can add, delete , Edit the Tabel in for the text box value User Specifies

and then on Submit, this table along with its Data(tr and td) accessible to the C# code

I wouldn't suggest that as rows and columns added client-side will NOT persist so that changes will be available server-side unless you handle it yourself. On a submit, the table will return to the state that it was on the previous rendering (before any changes).

NC...

0
NC01
7/29/2008 3:21:37 PM
Hi mohit.agrawal
 
I totally agree with NC’s previous post.
If you want add data without post back, the simplest way is put your data represent control (for example, GridView) into a UpdataPanel is OK, you can check the following thread:

http://forums.asp.net/p/1294965/2520787.aspx#2520787


 

alternatively, you can write AJAX functions to achieve what you need.


 
 
If I’ve misunderstood your problem, please feel free to let me know.
 
Thanks.

 


Lance Zhang
Microsoft Online Community Support

Please remember to mark the replies as answers if they help and unmark them if they provide no help.
0
Lance
8/1/2008 6:44:24 AM

Hi mohit.agrawal


 

There is another way; I think using ASP.NET Table Control will solve your problem. It is a server-side control and can persist the new cells after post back.


 

For more information:


 

http://www.w3schools.com/aspnet/control_table.asp


http://www.startvbdotnet.com/aspsite/controls/table.aspx


 

And sample code from http://www.youthfly.net/blog/article.asp?id=260:


  
     // Generate rows and cells
      int numrows = 3; 
      int numcells = 2;
      for (int j = 0; j < numrows; j++)
      {
          TableRow r = new TableRow();
          for (int i = 0; i < numcells; i++)
          {
              TableCell c = new TableCell();
              c.Controls.Add(new LiteralControl("row " + j.ToString() + ", cell " + i.ToString()));
              r.Cells.Add(c);
          }
          Table1.Rows.Add(r);
      }
 

 

    <asp:Table ID="Table1" runat="server" Height="201px" Width="232px">
    </asp:Table>
 
Lance Zhang
Microsoft Online Community Support

Please remember to mark the replies as answers if they help and unmark them if they provide no help.
0
Lance
8/1/2008 6:53:35 AM

Lance Zhang - MSFT:

Hi mohit.agrawal


 

There is another way; I think using ASP.NET Table Control will solve your problem. It is a server-side control and can persist the new cells after post back.


 

For more information:


 

http://www.w3schools.com/aspnet/control_table.asp


http://www.startvbdotnet.com/aspsite/controls/table.aspx


 

And sample code from http://www.youthfly.net/blog/article.asp?id=260:


  
     // Generate rows and cells
      int numrows = 3; 
      int numcells = 2;
      for (int j = 0; j < numrows; j++)
      {
          TableRow r = new TableRow();
          for (int i = 0; i < numcells; i++)
          {
              TableCell c = new TableCell();
              c.Controls.Add(new LiteralControl("row " + j.ToString() + ", cell " + i.ToString()));
              r.Cells.Add(c);
          }
          Table1.Rows.Add(r);
      }
 

    <asp:Table ID="Table1" runat="server" Height="201px" Width="232px">
    </asp:Table>

 

Sorry Lance, but that will not persist across PostBacks. The rows/cells would need to be created on EACH page refresh/PostBack.

NC...

0
NC01
8/1/2008 11:39:33 AM

Hi NC, you are right, that cannot persist across postback.

May be it can be achieved by store a TableRow collection in Session variable, but will be more complex to handle.


Lance Zhang
Microsoft Online Community Support

Please remember to mark the replies as answers if they help and unmark them if they provide no help.
0
Lance
8/4/2008 2:11:14 AM

Lance Zhang - MSFT:

Hi NC, you are right, that cannot persist across postback.

May be it can be achieved by store a TableRow collection in Session variable, but will be more complex to handle.

There is no way to access Session variables from JavaScript. They are server-side only variables. The only way is with hidden elements (a true nightmare) or using AJAX, which in my opinion is the only way to do this, other than normal PostBack stuff. I would NEVER recommend anyone doing something like this. It is easier, and probably just as fast, to use a DataGrid, PostBack, and rebind.

NC...

 

0
NC01
8/4/2008 11:45:33 AM

How it will done using AJAX, UpdatePanel Makes code very slow,

 

0
amit_3281
8/4/2008 2:39:18 PM

Also,

 

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default4.aspx.cs" Inherits="Default4" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" >

<head runat="server">

<title>Untitled Page</title>

 

<script type="text/javascript" language="javascript">function AddClick()

{

alert(
'Add Click');

 

var x=document.getElementById('tblInfo').insertRow(0);

var y=x.insertCell(0);

var z=x.insertCell(1);

var m=x.insertCell(2);

var n=x.insertCell(3);

var o=x.insertCell(4);

 

y.innerHTML=
"<input type=\"button\" value=\"Edit\" onclick=\"EditClick(this);\">";

z.innerHTML="<input type=\"button\" value=\"Delete\" onclick=\"RemoveClick(this);\">";

m.innerHTML=document.getElementById('txtName').value;

n.innerHTML=document.getElementById('txtAdd').value;

o.innerHTML=document.getElementById('txtCity').value; alert(document.getElementById('tblInfo').innerHTML);

//document.getElementById('tblInfo').innerHTML = "<TR>" + x.innerHTML + "</TR>";

//alert(x.innerHTML);

 

//var lt = document.getElementById('<%= Literal1.ClientID %>');

//alert(lt);

//lt.Text = document.getElementById('tblInfo').innerHTML;

 

var myTextBox = document.getElementById('Hidden1');

 

alert(myTextBox);

myTextBox.value = document.getElementById(
'tblInfo').innerHTML;

 

 

datadiv.InnerText = document.getElementById(
'tblInfo').innerHTML;

//myTextBox.Text = document.getElementById('tblInfo').innerHTML;

 

 

//document.getElementById('datadiv').innerHTML = document.getElementById('tblInfo').innerHTML;

 

 

//document.getElementById('datadiv').innerHTML = "Hello";

}

function EditClick(r)

{

var i=r.parentNode.parentNode.rowIndex;

 

var existRow = document.getElementById("tblInfo").rows[i];

 

//var arr = new Array(5);

//arr = document.getElementById('tblInfo').cells[i];

var existCell = existRow.getElementsByTagName("td");

//var text = existCell[3].innerHTML;

 

document.getElementById(
'txtName').value = existCell[2].innerHTML;

document.getElementById('txtAdd').value = existCell[3].innerHTML;

document.getElementById('txtCity').value = existCell[4].innerHTML;

}

function RemoveClick(r)

{

alert(
'Remove Click');

var i=r.parentNode.parentNode.rowIndex;

document.getElementById('tblInfo').deleteRow(i);

}

</script> </head>

<body>

<form id="form1" runat="server">

<div>

&nbsp;

<input id="txtName" type="text" />

<input id="txtAdd" type="text" />

<input id="txtCity" type="text" /><br />

<input id="btnAdd" type="button" value="Add" onclick="AddClick();" />

<input id="btnRemove" type="button" value="Remove" onclick="RemoveClick(this);"/>

<asp:Literal ID="Literal1" runat="server" Visible="False"></asp:Literal><br />

<table id="tblInfo" runat="server" style="width: 474px">

</table>

 

</div>

<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" />

<input id="Hidden1" type="hidden" runat="server"/>

<div id="datadiv" runat="server" class="container" >

<asp:Xml ID="Xml1" runat="server"></asp:Xml></div>

<asp:Table ID="Table1" runat="server" Width="410px">

</asp:Table>

</form> </body>

</html>

 

 

public partial class Default4 : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

}

protected void Button1_Click(object sender, EventArgs e)

{

//Table1.Rows.Add();

int x = tblInfo.Rows.Count; int y = 0;

//string sas = datadiv.InnerText;

//string s = Page.Request.Params["Hidden1.value"].ToString();

int n = Request.Form.AllKeys.Length;string ss23 = Request.Form.GetValues("tblInfo").ToString();

 

string ss = Hidden1.Value ;

HtmlTable t = new HtmlTable();

//tblInfo.InnerHtml = ss;

int u = tblInfo.Rows.Count;

y = 20;

}

}

how to access this table tblInfo on server side

0
amit_3281
8/4/2008 2:41:15 PM

Try this: http://aspalliance.com/773

NC...

 

0
NC01
8/4/2008 2:58:58 PM
Reply:

Similar Artilces:

Add Table Row containing TextBoxes dynamically + Access data from dynamically added TextBoxes
Let's say I have a table, each row containing 5 cells, each cell containing a TextBoxBy default, I want only 1 row showing... but I want to have a Button that allows me to add an additional row every time it's clickedHow do I dynamically add TableRows containing TextBoxes in VB? Or is this something that should be done client-side with Javascript?I also want to be able to use the user's input from these TextBoxes in the body of an email that will be sent through the web page when the user clicks a "Submit" button on the page.I'm new to VBScript so I'm really loo...

Showing data in a dynamic table with the help of a dynamic table
   Hi Friends,I've a DataReader which fetches records.I'm able to show the records in a gridview but my problem is how to show the records in a  dynamic table?  I was doing it in following way...........   Sub gvBind(ByVal ToDate As Date, ByVal FromDate As Date)MyConn = New SqlConnection(System.Configuration.ConfigurationManager.AppSettings(strConn))  MySqlCom = New SqlCommand("ADMsp_Fetch_DailySales", MyConn) MySqlCom.CommandType = CommandType.StoredProcedure MySqlCom.CommandTimeout = 1000MySqlCom.Parameters.Add("@todate", S...

Text from a Dynamically generated TextBox in a Dynamically generated Table and Ajax
Hi I have made an Ajax enabled asp page. I get a table when i click on a button. I dynamically create this table and show it using ajax. The Cells of the table contains TextBoxes. Now I have another button (Button2) which takes the text from the first textbox (id="text0") and displays it. The problem is this second button (Button2), it doesnt work correctly. That is, if I type something on the first textbox (text1) and click on the button2, it does not show me the change in the textbox. This is the code for the button2 onClick event. protected void Button2_Click(object sen...

how can I dynamicly add rows and cells to an existing table thru javascript on the client?
exactly that: how can I dynamicly add rows and cells to an existing table thru javascript on the client?    Had this in some old notes: HTML DOM insertRow() MethodPlease mark the post(s) that have helped you as "Answer"I'm better at brewing beer than crafting code but I have to do the latter to do the former. Will code for malt. Thank you very much. I had a look at that. It does not have any insertCell() method...   how do I then add cells to my newly added row?    HTML DOM insertCell() MethodPlease mark the post(s) that have helped you as &qu...

Sorting a Dynamic Table created by VB.Net (Needs Javascript and/or VB Code)
Hello everyone (forgive me for a double post, but the admin put it in Master Page/Themes for some reason, and I am in need of assistance fairly urgently),  I am working on trying to set up a sort image on the headers of each of my columns. I have in VB.Net code dynamically create a table fully variablized. My issue is that I am adding a script for something like this into the headers. It creates the image next to the header and displays it on the table. ======== HeaderItem.Src = "\Images\SortOff.png" HeaderItem.Width = 15 HeaderItem.Height = 15 HeaderItem.Attributes(&qu...

Table in Table Dynamically?
Hi First a note of thanks to many - ~Rick in particular - for the help earlier given. I have a table in which I can add rows and columns. It is fine. Now I want to add a second table as a row to the first table with code. How does this work? I tried creating second table and created rows in second table with cells (No problems). Now how do I add the second table to first one (adding in the additional row) with code? I tried the following. Table my2Table = CreateTable2(); // This routine creates table 2. No errors and works fine. Table1.Rows.Add((TableRow)(my2Table)) // Er...

How to move a row in a data table object to the top of the table? The data table is in a data set. The data is bound to a drop down list box.
I am maintaining some 2003 C#/asp.net code for a web application. In the application a table in a data set is usedto populate a drop down list box.(The drop down list box will display a list of names) Before the data set table is bound to the list box control, blank characters are inserted at the topof the data set table. The purpose of this, is to display a blank line in the drop down list box, when the list box isinitially displayed. This code works fine. (See lines 1-14 below). Now I have been asked to modify the source code so that instead of a blank line being inserted at to top of th...

Is having a trigger that inserts a row in Table 'A', when a row in same table is inserted by ADo.Net code?
I want to insert a row for a Global user  in Table 'A' whenever ADO.Net code inserts a Local user row into same table. I recommended using a trigger to implement this functionality, but the DBA was against it, saying that stored proecedures should be used, since triggers are unreliable and slow down the system by placing unecessary locks on the table. Is this true OR the DBA is saying something wrong? My thinking is that Microsoft will never include triggers if they are unreliable and the DBA is just wanting to offload the extra DBA task of triggers to the programmer so that a s...

dynamic html table with dynamic controls and how to increment Rows ?
I created a html table with dynamic controls like(dropdownlist,Textbox,checkbox) and I filled the controls  with the datatable fields.The row will be like following, ------------------------------------------------------------------------------------------------------------Dropdownlist(ddl1)      |          Textbox(txtb1)        |         Checkbox(chkb1)---------------------------------------------------------------------------------------------------------------I need one more row t...

How to access a grandparent of a table in dynamic data?
Hello, It is a common case to show the parent data, by foreignkey, in dynamic data. But I get stuck when I try to access the parent of a parent table, i.e. the grandparent of a table. I have a table called "Bill" which has the foreignkey to table "Application". And Table "Application" has foreignkeys to table "Course" and table "Student". Now, I am trying to get the column "Title" of table "Course" and column "Name" of table "Student", as the foreignkey display of "Applicatio...

Generation of Dynamic Data Grid / Table
How to generate a Dynamic Data Grid / Table at run time using all the propertis of Rowspan and Colspan. i.e. To avoid the duplicate values in the table I need to do either rowspan or colspan at the runtime itself. Based on the value retreiving from the database, I need to do rowspan or colspan according to my values. with Thanks & Regards, Madhu. Do you mean you need to merge the adjacent cells, no matter in rows or columns, if their values are equal? If so, you will need the build the table manually. I mean you will have to extract the data from the database into the da...

Adding javascript dynamically between table rows
Hi, I am building a table dynamically in my aspx.cs using the Table, TableRow and TableCell objects. I managed to build the table without any issues except I needed to add script tags between each table row. Does anyone know how to accomplish such this? (i.e.) <table><tr><td>text here</td></tr><script> some javascript</script> <tr><td> etc...  Thnx in advance, IJ I have no idea why you would do this, but there is no way unless you create your own Table control class that is derived from the generic asp:...

Problem on Dynamic generate table row
i am trying to make a form with search criteria it look like|DropDownlist | TextBox| CheckBoxwhen user click on check boxit become add new row under the original row |DropDownlist | TextBox| CheckBox|DropDownlist | TextBox | CheckBox anybody can give me some idea or how to do on this ...

How to access dynamically Html controls (client side controls) using C# server side scripts
Folks,I have problem try to to access dynamically Html controls (client side controls) using C# server side scripts. Please give me helps.     The error is as follows Exception Details: System.InvalidCastException: Specified cast is not valid.Source Error: Line 79: { Line 80: Control c = Page.FindControl("ddlTC" + i); Line 81: ((DropDownList)c).DataSource = mdt; Line 82: ((DropDownList)c).DataTextField = "ClassID"; Line 83: ((DropDownList)c).DataValueField = "Course"; My aspx page source codes: ...<...

Web resources about - Dynamic table generation by JavaScript, Accessing row and data of dynamic table in C# code - asp.net.client-side

History of video game consoles (fourth generation) - Wikipedia, the free encyclopedia
In the history of computer and video games , the fourth generation (more commonly referred to as the 16-bit era ) of games consoles began on ...

'Like you're touching someone covered in a lubricant': next generation condoms
Researchers are using brain scanning technology to test the &quot;pleasure&quot; attributes of the next generation of condoms.

Four things making Generation-Z miserable
Australian scientist have identified four things that will make Generation Z miserable for decades to come.

Port lease deal steals from future generations
Deals are being done that will affect the bay, neighbouring communities and road networks.

Canberra woman allegedly assaulted by three generations of her own family
... and bruises to her head. A Canberra woman suffered cuts to her arm and face and a bruised head after she was allegedly assaulted by three generations ...

Star Wars: The Force Awakens is a great starter film for a new generation
Ars Technica has taken pains not to reveal major and even minor spoilers in our review of The Force Awakens. Still, please note that our review ...

The Content Coattails of the Digital Generation and 5 Ideas To Do Better
I really miss the days when we all still created a lot of original stuff. I don’t blog as much as I used to, but I still love the idea of forming ...

Why Mark Zuckerberg will go down as 'one of the most important business leaders of our generation'
... global marketing solutions, Carolyn Everson explains why she thinks Mark Zuckerberg is one of the most important business leaders of our generation ...

New efforts to inspire next generation of pilots - Videos - CBS News
Many regional airlines are struggling to fill the cockpit due in part to the high costs of flight school. While JetBlue is launching a training ...

Cartoon: A long time ago, generations far, far away...
Follow @RubenBolling on Twitter and Facebook. Please join Tom the Dancing Bug's subscription club, the INNER HIVE,...

Resources last updated: 12/19/2015 8:15:30 AM