Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder
    Join Date
    Nov 2002
    Location
    Loughborough (UK)
    Posts
    209
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Build HTML table clientside

    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

  • #2
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    This example should get you started:
    Code:
    <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

  • #3
    Regular Coder
    Join Date
    Nov 2002
    Location
    Loughborough (UK)
    Posts
    209
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That's excellent, thanks!

  • #4
    Senior Coder
    Join Date
    Jun 2002
    Location
    Nashua, NH
    Posts
    1,724
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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
    Vladdy | KL
    "Working web site is not the one that looks the same on common graphical browsers running on desktop computers, but the one that adequately delivers information regardless of device accessing it"


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •