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 3 of 3
  1. #1
    Smokes a Lot
    Join Date
    Jul 2003
    Location
    CA, USA
    Posts
    1,594
    Thanks
    5
    Thanked 20 Times in 20 Posts

    Dynamically Generating A Table

    Hello,

    Below is some code I'm working on just to learn to create elements using createElement and appendChild etc. My question has to do with the last line of code, it seems unnessesary but is the only way I could get the table to display. Why is that the case, I mean I'm basically telling it to take what is already there and put it there again.

    Code:
    <html>
    <head>
    <style type="text/css">
    table
    {
    	border:solid 1px;
    }
    </style>
    <script type="text/javascript">
    
    
    function makeTable()
    {
    	var column=6;
    	var row=10;
    	
    	var tbl=document.createElement('table');
    	for(i=0;i<row;i++)
    	{
    		var tr=document.createElement('tr');
    		tbl.appendChild(tr);
    		for(j=0;j<column;j++)
    		{
    			var td=document.createElement('td');
    			tr.appendChild(td)
    			td.appendChild(document.createTextNode('Hello'))
    		}
    	}
    	document.getElementById('tbl1').appendChild(tbl);
    	document.getElementById('tbl1').innerHTML=document.getElementById('tbl1').innerHTML; 
    }
    	
    </script>
    </head>
    <body onload="makeTable()">
    <div id="tbl1">
    </div>
    </body>
    </html>
    Thanks,
    Basscyst
    Last edited by Basscyst; 08-17-2004 at 09:38 PM.
    Helping to build a bigger box. - Adam Matthews

  • #2
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    It could be that you are appending the table tr to soon or it could be that you forgot an important element of the table which would be the tbody....

    I say I'm not sure because I made both changes (red) at the same time without thinking to do it in steps. Either way, you do need to use tbody particularly when creating tables or appending to tables using the DOM....

    Code:
    <html>
    <head>
    <style type="text/css">
    table
    {
    	border:solid 1px;
    }
    </style>
    <script type="text/javascript">
    
    
    function makeTable()
    {
    	var column=6;
    	var row=10;
    	
    	var tbl=document.createElement('table');
    	var tbody=document.createElement('tbody');
    	for(i=0;i<row;i++)
    	{
    		var tr=document.createElement('tr');
    		for(j=0;j<column;j++)
    		{
    			var td=document.createElement('td');
    			tr.appendChild(td)
    			td.appendChild(document.createTextNode('Hello'))
                   }       tbody.appendChild(tr);
            }              tbl.appendChild(tbody);
                           document.getElementById('tbl1').appendChild(tbl);
    }
    	
    </script>
    </head>
    <body onload="makeTable()">
    <div id="tbl1">
    </div>
    </body>
    </html>
    ......Willy

  • #3
    Smokes a Lot
    Join Date
    Jul 2003
    Location
    CA, USA
    Posts
    1,594
    Thanks
    5
    Thanked 20 Times in 20 Posts
    Makes sense, thanks for setting me straight Willy.

    Basscyst
    Helping to build a bigger box. - Adam Matthews


  •  

    Posting Permissions

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