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

Question

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

13k views Asked by nawtydoggg At 17 September 2024 at 03:37

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>

Original Q&A

There are 1 answers

**zer00ne** · Answer 1 · 2017-01-08 03:21:58

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>

TechQA.

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

There are 1 answers

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in HTML-TABLE

Related Questions in DOCUMENT.WRITE

Popular Questions

Popular Tags

Trending Questions