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
    New Coder
    Join Date
    Jan 2012
    Posts
    22
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Unhappy Can't figure out how to use JS to create nested tables

    Hello again everyone.
    I got this bit of code from "rnd me" and I guess I'm not as smart as I thought I was, because I was hoping to look at this code and figure out how to modify it to allow for nested Tables to be created but everything I try seems to make me scratch my head so I'm starting with the given code and hoping to get some help (again)

    Also on my prev post I can't get it to list as resolved


    Code:
     <!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>
    	<title>table maker</title>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    </head>
    <body>
      
    
    
    <table id="tab">
    <tr id="i">
    <td>hello world</td>
    </tr>
    </table>
    
      
    <script type='text/javascript'>
      
    var t=document.getElementById("tab"), //find table object
     base=document.createElement("tr");  //create template row
     base.appendChild(document.createElement("td")); //add a cell to template
    
    for (var i=1; i<10; i++){
       var row=base.cloneNode(true); //dupe template
       row.id="row"+i;   //assign id attrib using i and row prefix
       t.appendChild(row); //add new row to the table
       row.cells[0].innerHTML=Array(7).join(i);//insert dummy content
    }//next i
    
    </script>
    </body>
    </html>

  • #2
    Regular Coder
    Join Date
    Sep 2002
    Posts
    429
    Thanks
    0
    Thanked 20 Times in 20 Posts
    1. make a table creation function using only a loop (not a bunch of fancy create element tags).

    2. Be sure you can make varying tables by sending parameters to the funxtion...heheh. (ie: rows, cols, colcontent)

    3. In funxtion create a local variable then at end of funxtion return variable to sender.
    (var output = ''; make loop; return output;

    Then you can add any number of tables anywhere you like.
    NO Limits!! www.dhcreationstation.com
    ------------------------------------------------------------
    Broken items wanted for tinkerin'! PostItNow@BrokenEquipment.com

  • #3
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,465
    Thanks
    0
    Thanked 634 Times in 624 Posts
    To nest one table inside another in the extremely rare situation where your tabular data contains data that requires a separate table you simply attach an id to each of the <td> tags in whichever row or column is going to contain the data in a nested table and then apply the same sort of table processing to that as you did with the original table.

    Note that the only two elements in a table that need to be created using createElement are the 'table' and 'tbody' elements. All of the other elements in the table can be created and updated using the table DOM commands. What goes inside of the <td> elements can be created the same way as you would if it wasn't inside a table as a table cell content is no different in the way JavaScript handles it from the way that it would be handled if it wasn't in the table.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #4
    New Coder
    Join Date
    Jan 2012
    Posts
    22
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Thank you both for your input but seeing how i'm still quite new to JS I have pretty much no idea how to accomplish either of the suggestions you have provided BUT... I have been looking for training material for learning the DOM (in a way that I can understand it) and the link in your signature seems to be helping.

    If ether or both of you could provide some simple working code to illustrate your suggestions that would be very helpful if not that is fine too.
    NOTE: this is not a homework assignment or anything like that so don't get the idea that i'm asking for someone to do my schoolwork for me or anything - since I've been out of school for many years now :>


  •  

    Tags for this Thread

    Posting Permissions

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