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 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Dec 2016
    Posts
    8
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Trying to create HTML table in javascript using document.write

    I can t seem to figure out what is wrong with this code, any help would be appreciated !!

    Code:
    <!DOCTYPE html>
    
    <html>
        
    <head>    
    <title></title>
    </head>
    
    <body>
        
    <script type="text/javascript">
    
    var rows;
    var cols;
    
    function table(rows, cols){
    document.write('<table border="1">');
    for (i=0, i < rows, i++){
    
    document.write('<tr>');
    
    for (j=0, j < cols, j++) {
        document.write('<td>' + 'cell' + '</td>');
    }
        document.write('</tr>');
    }
    document.write('</table>');
    }
    
    document.write (table(2, 4));
    
    </script>
    
    </body>
    
    </html>
    Last edited by VIPStephan; 01-08-2017 at 09:44 AM. Reason: added code BB tags

  2. #2
    New to the CF scene
    Join Date
    Dec 2016
    Posts
    8
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Found the problem, it was the syntax

  3. #3
    Administrator VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    10,675
    Thanks
    6
    Thanked 1,266 Times in 1,236 Posts
    Yeah, the syntax is still the problem, even if it’s working now.
    I hope this is just a study (of how not to write code in 2017)?

  4. #4
    Senior Coder deathshadow's Avatar
    Join Date
    Feb 2016
    Location
    Keene, NH
    Posts
    1,886
    Thanks
    2
    Thanked 274 Times in 264 Posts
    To clarify on what @VIPSTephen means, you REALLY shouldn't be using document.write -- it hangs first-load, hangs the loading of subfiles, hangs the parser, and forces the page parser to restart itself once the script finishes executing.

    Just like how you really shouldn't use innerHTML anymore either unless you're putting into an element that's not on the DOM that you then append AFTER it's been parsed.

    Which is why to do what you are trying to do there, the proper 'modern' approach is to use the DOM directly to do it.

    Side note, it's 2017, you don't need to say type="text/javascript" anymore... it's also not 1997, so there's no such thing as a border attribute either.

    There are methods on table elements for adding rows and cells directly on the DOM, those really are what you should be using.


    Code:
    <!DOCTYPE html><html lang="en"><head><meta charset="utf-8">
    <title>DOM Table Demo</title>
    </head><body>
        
    <script>
    
    function newTable(rows, cols) {
    	var 
    		table = document.body.appendChild(document.createElement('table')),
    		tr,
    		td;
    	for (var i = 0; i < rows; i++) {
    		tr = table.insertRow(-1); // -1 means at end
    		for (var j = 0; i < cols; j++) {
    			td = tr.insertCell(-1);
    			td.appendChild(document.createTextNode('cell'));
    		}
    	}
    }
    		
    newTable(2, 4));
    	
    </script>
    
    </body></html>
    Thankfully appendChild returns the node that was appended, so you can just nest them like that. Use the DOM, NOT document.write or innerHTML. The code might seem more complex, but it runs faster, uses less CPU time by bypassing the parser, and therein doesn't drain the battery on mobile like the "older" approaches do. (if by older we mean nineteen years ago since createElement, insertRow and insertCell are circa IE 5.2 mac / IE 5.5)
    I would rather have questions that can't be answered, than answers that can't be questioned.
    http://www.cutcodedown.com

  5. #5
    Regular Coder
    Join Date
    Sep 2010
    Location
    U S of A
    Posts
    206
    Thanks
    4
    Thanked 39 Times in 39 Posts

  6. #6
    Administrator VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    10,675
    Thanks
    6
    Thanked 1,266 Times in 1,236 Posts
    Strange, why is Nawtydoggg basically asking the same question again after it has already been solved?

  7. #7
    New to the CF scene
    Join Date
    Dec 2016
    Posts
    8
    Thanks
    3
    Thanked 0 Times in 0 Posts
    It was sort of a challenge to try it in document.write. Thats mostly the reason i asked twice, first time was not what i was looking for, so i reformated the question to make sure just using document.write.
    Thanks for all the tips guys, i am new at this, and the help is greatly appreciated ! cheers !


 

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
  •