...

View Full Version : Build HTML table clientside



christrinder
03-10-2004, 10:07 AM
Hi People,

I'm developing some software in ASP.NET (OK, a web page!), and a lot of it uses a tree view that I have created. The tree view is essentially lots of html tables hiding and showing each other when clicked. My problem is, the data displayed in the tree view has got so large that the time taken for the browser to loop through all the tables is taking too long. What I thought about doing is using a web service to retrieve the relevant childs every time a parent is clicked. My question is, how do I append new rows to an html table on the client and in a specific position within the table.

Thanks for any help you guys can give.

Chris

Willy Duitt
03-10-2004, 11:22 AM
This example should get you started:

<HTML><HEAD><TITLE></TITLE>
<script language="javascript">
<!--
// Realise by ApacheJeff
// www.huntingground.freeserve.co.uk

total_rows=1
cell_num=12
has_run=0
function create_table(){

if(has_run!=0){
doc_body.removeChild(my_table); // remove table
total_rows++
}
has_run=1

my_table = document.createElement("TABLE");
my_table.border=1
my_table.width=700
my_table.cellPadding=2
my_table.cellSpacing=2

my_t_body = document.createElement("TBODY");

for(i=0;i<total_rows;i++) {

//Create headers for first row here

new_row=document.createElement("TR");
new_cell=document.createElement("TH");
cell_content=document.createTextNode("First Name");
new_cell.appendChild(cell_content);
new_row.appendChild(new_cell);
my_t_body.appendChild(new_row);

new_cell=document.createElement("TH");
cell_content=document.createTextNode("Last Name");
new_cell.appendChild(cell_content);
new_row.appendChild(new_cell);
my_t_body.appendChild(new_row);

new_cell=document.createElement("TH");
cell_content=document.createTextNode("Regular");
new_cell.appendChild(cell_content);
new_row.appendChild(new_cell);
my_t_body.appendChild(new_row);

new_cell=document.createElement("TH");
cell_content=document.createTextNode("OT");
new_cell.appendChild(cell_content);
new_row.appendChild(new_cell);
my_t_body.appendChild(new_row);

new_cell=document.createElement("TH");
cell_content=document.createTextNode("DBL");
new_cell.appendChild(cell_content);
new_row.appendChild(new_cell);
my_t_body.appendChild(new_row);

//Create input cells for first row here

new_row=document.createElement("TR");
new_cell=document.createElement("TD");
cell_content=document.createElement("INPUT");
cell_content.size=20;
cell_content.name="Fname";
new_cell.appendChild(cell_content);
new_row.appendChild(new_cell);
my_t_body.appendChild(new_row);

new_cell=document.createElement("TD");
cell_content=document.createElement("INPUT");
cell_content.size=20;
cell_content.name="Lname";
new_cell.appendChild(cell_content);
new_row.appendChild(new_cell);
my_t_body.appendChild(new_row);

new_cell=document.createElement("TD");
cell_content=document.createElement("INPUT");
cell_content.size=9;
cell_content.name="Regular";
new_cell.appendChild(cell_content);
new_row.appendChild(new_cell);
my_t_body.appendChild(new_row);

new_cell=document.createElement("TD");
cell_content=document.createElement("INPUT");
cell_content.size=9;
cell_content.name="OverTime";
new_cell.appendChild(cell_content);
new_row.appendChild(new_cell);
my_t_body.appendChild(new_row);

new_cell=document.createElement("TD");
cell_content=document.createElement("INPUT");
cell_content.size=9;
cell_content.name="DBLTime";
new_cell.appendChild(cell_content);
new_row.appendChild(new_cell);
my_t_body.appendChild(new_row);


//Create second row of headers here

new_row=document.createElement("TR");
new_cell=document.createElement("TH");
cell_content=document.createTextNode("Commissions");
new_cell.appendChild(cell_content);
new_row.appendChild(new_cell);
my_t_body.appendChild(new_row);

new_cell=document.createElement("TH");
cell_content=document.createTextNode("GT Commissions");
new_cell.appendChild(cell_content);
new_row.appendChild(new_cell);
my_t_body.appendChild(new_row);

new_cell=document.createElement("TH");
cell_content=document.createTextNode("AD Comm");
new_cell.appendChild(cell_content);
new_row.appendChild(new_cell);
my_t_body.appendChild(new_row);

new_cell=document.createElement("TH");
cell_content=document.createTextNode("PTO Dollars");
new_cell.appendChild(cell_content);
new_row.appendChild(new_cell);
my_t_body.appendChild(new_row);

new_cell=document.createElement("TH");
cell_content=document.createTextNode("Charge to Dept");
new_cell.appendChild(cell_content);
new_row.appendChild(new_cell);
my_t_body.appendChild(new_row);


//Create input cells for second row here

new_row=document.createElement("TR");
new_cell=document.createElement("TD");
cell_content=document.createElement("INPUT");
cell_content.size=20;
cell_content.name="Comm";
new_cell.appendChild(cell_content);
new_row.appendChild(new_cell);
my_t_body.appendChild(new_row);

new_cell=document.createElement("TD");
cell_content=document.createElement("INPUT");
cell_content.size=20;
cell_content.name="GT_Comm";
new_cell.appendChild(cell_content);
new_row.appendChild(new_cell);
my_t_body.appendChild(new_row);

new_cell=document.createElement("TD");
cell_content=document.createElement("INPUT");
cell_content.size=9;
cell_content.name="AD_Comm";
new_cell.appendChild(cell_content);
new_row.appendChild(new_cell);
my_t_body.appendChild(new_row);

new_cell=document.createElement("TD");
cell_content=document.createElement("INPUT");
cell_content.size=9;
cell_content.name="PTO_Dollars";
new_cell.appendChild(cell_content);
new_row.appendChild(new_cell);
my_t_body.appendChild(new_row);

new_cell=document.createElement("TD");
cell_content=document.createElement("INPUT");
cell_content.size=9;
cell_content.name="Chrg_Dept";
new_cell.appendChild(cell_content);
new_row.appendChild(new_cell);
my_t_body.appendChild(new_row);


}

my_table.appendChild(my_t_body);
doc_body=document.getElementsByTagName("BODY").item(0)
doc_body.appendChild(my_table);
}

// -->
</script>
</HEAD>
<BODY onload="create_table()">
<button onClick="create_table()">Click to add another row</button>
<!-- DOM TABLE -->
</center>

</BODY></HTML>

.....Willy

christrinder
03-10-2004, 01:22 PM
That's excellent, thanks!

Vladdy
03-10-2004, 02:06 PM
Nested lists are better choice for tree structure than tables.
As far as client side generation of tables goes:
www.vladdy.net/webdesign/DOM_Tables.html



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum