Trying to get HTML table to appear with document.write in Javascript

Question

I can't figure out why this code is not working out. What am I doing wrong? I need to use document.write to create my table in Javascript. Any help would be appreciated!

<!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>

Don't use document.write! Why are you using commas?! Why are you writing undefined? — Andrew Li
– Andrew Li, Commented Jan 8, 2017 at 0:59
Start by looking at the errors in browser dev tools console. You have logic problems but also syntax problems that the console will point you to — charlietfl
– charlietfl, Commented Jan 8, 2017 at 1:00
I don't recommend using document.write(); but the reason this isn't working is because of your for() loops. Replace , with ; example i=0; i<rows; i++ — NewToJS
– NewToJS, Commented Jan 8, 2017 at 1:00
@NewToJS that's one problem but function returns nothing to write also — charlietfl
– charlietfl, Commented Jan 8, 2017 at 1:01
@charlietfl yes, it will also write undefined due to document.write (table(2, 4)); this should only be a function call table(2, 4); — NewToJS
– NewToJS, Commented Jan 8, 2017 at 1:04

zer00ne · Accepted Answer · 2017-01-08 04:13:25Z

Ok, by now you got an ear full of document.write, refer to this about the subject.

At a glance your syntax is good with two glaring exceptions is that in a for loop, we use semicolons because a for loop is like a shorthand form of 3 statements and what we have after a statement so browsers know you are finished stating a statement is a ;.

for(let i=0; i < rows; i++) {...}

The other glaring error is how you are calling the function at the end, it should be:

table(2,4);

The following Snippet demonstrates an alternate way of creating tables. Details commented in Snippet.

SNIPPET

<!DOCTYPE html>

<html>

<head>
  <title></title>
</head>

<body>

  <!--We don't have to add "type="text/javascript"...
<script> tags anymore-->
  <script>
    var rows;
    var cols;

    function createTable(rows, cols) {
        /* Using creatElement() method is simple and fast...
        || ...but be mindful that even though you created...
        || ...an element, it's not going to showup until...
        || ...it is added to the DOM.
        */
        var table = document.createElement('table');

        /* At this point we have a <table> that's...
        || ..."floating around". This is the most...
        || ...advantageous time to add any attributes...
        || ...and other elements. It's costly to add...
        || ...to add to the DOM, so while any element...
        || ...is detached from the DOM (i.e. <table>,)...
        || ...add as much as you are able to before...
        || ...adding it to the DOM.
        */
        table.setAttribute('border', '1');

        /* for loop = 3 statements + 2 semicolons */
        // let ~i~ equal 0;
        // while ~i~ is less than ~rows~ continue looping;
        // at the end of a loop increment ~i~ by 1;
        for (let i = 0; i < rows; i++) {

          // Now we have a detached <tr>...
          var tRow = document.createElement('tr');

          // ...which moves on to an inner loop
          for (let j = 0; j < cols; j++) {

            // A detached <td>
            var tData = document.createElement('td');

            // While <td> is detached, let's add text
            tData.textContent = 'Cell';

            /* appendChild() method will add the <td>...
            || ...to the <tr>. This inner for loop will...
            || ...continue to add <td> to this <tr>...
            || ...as many times the number of ~cols~...
            || ...That was set by this statement:
            || j < cols; and it's perpetuated by this:
            || j++
            */
            tRow.appendChild(tData);
          }
          /* Once the <tr> has completed all of the...
          || inner loops, <tr> is now added to <table>...
          || ...That is one complete loop of the outer
          || ...loop. That's one <tr> filled with <td>...
          || ...This whole cycle will go on until...
          || ...whatever number ~rows~ is. 
          */
          table.appendChild(tRow);
        }
        /* After the last outer loop, the <table> is...
        || ...completed and added to the <body> which...
        || ...already is attached to the DOM, thus...
        || ...<table> is in the DOM as well.
        */
        document.body.appendChild(table);
      }
      // Call the function and pass 2 and 4.
    createTable(2, 4);
  </script>

</body>

</html>

Collectives™ on Stack Overflow

Trying to get HTML table to appear with document.write in Javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related