JavaScript table overwriting html file

Question

I have an assignment to write JavaScript which will create a table(x columns, y rows...) and I managed to do that. I have a problem with writing to the html page.

My code:

document.write('<table border = \"3\">');
      while(i <= y) 
      {
        document.write('<tr>');
        j = 0;
        while(j <= x) 
          {
            if (i == 0) 
          {
              if (j == 0)
              {
                document.write(' <th></th> ');
              }
              else               
              {
                document.write('<th>');
                document.write("x = " + j);
                document.write('</th>');
              }             
          }
          else 
          {
            if (j == 0) 
              {
                document.write('<th>');
                document.write("y = " + i);
                document.write('</th>');
              }
            else
              {
                document.write('<td>');
                document.write(operation(i,j));
                document.write('</td>');
              }
          }
          j++;
        }
      document.write('</tr>');
      i++;
    } 
  document.write('</table>');  
  }

I guess it is overwriting the page because of document.write? How can I change this?

Answer 1

Please don't use document.write. See Why is document.write discouraged.

I think your use of document.write means it overwrite's the entire page. This is working as intended if you call the function after the page has loaded. All calls to document.write after the document is loaded creates a new document. We prefer DOM manipulation since it a safe way to directly edit the DOM that doesn't involve string manipulation.

Writing HTML as text should be left to the browser which parses a HTML file and loads it.

// feature detection for cross browser compliance.
var txt = function(node, text) {
    if (node.innerText !== undefined) {
        node.innerText = text; 
    } else if (node.textContent !== undefined) {
        node.textContent = text;    
    }
}

function createTable(rows, columns) {
    var table = document.createElement("table");
    table.border = '3';
    var tbody = document.createElement("tbody");
    var thead = document.createElement("thead");
    for (var i = 0; i < rows; i++) {
        var tr = document.createElement("tr");
        for (var j = 0; j < columns; j++) {
            var cell;
            if (i === 0) {
                cell = document.createElement("th");
                if (j !== 0) {
                    txt(cell, "x = " + j);
                }
            }
            else {
                if (j == 0) {
                    cell = document.createElement("th");
                    txt(cell, "y = " + i);
                }
                else {
                    cell = document.createElement("td");
                    txt(cell, operation(i, j));
                }
            }
            tr.appendChild(cell);
        }
        if (i === 0) {
            thead.appendChild(tr);    
        } else {
            tbody.appendChild(tr);    
        }
    }
    table.appendChild(thead);
    table.appendChild(tbody);

    return table;
}

Using DOM manipulation you could do it like above. There may be a few optimisations I missed. Live example (only tested chrome 10)

At least it works as intended.

Let me know if you want to see an implementation in say jQuery or some other DOM manipulation library. The code will be a lot nicer and more robust in terms of cross browser compliance.

Answer 2

I see a number of problems here. First and foremost, I don't believe your code is properly balanced. I believe as a first step it should look more like:

<script language="javascript">
    document.write('<table border = \"3\">');
    while(i <= y) {
        document.write('<tr>');
        j = 0;
        while(j <= x) {
            if (i == 0) {
                if (j == 0) {
                    document.write(' <th></th> ');
                } else {
                    document.write('<th>');
                    document.write("x = " + j);
                    document.write('</th>');
                }             
            } else {
                if (j == 0) {
                    document.write('<th>');
                    document.write("y = " + i);
                    document.write('</th>');
                } else {
                    document.write('<td>');
                    document.write(operation(i,j));
                    document.write('</td>');
                }
            }
            j++;
        }
        document.write('</tr>');
        i++;
    } 
    document.write('</table>');  
    </script>

Secondarily it looks to me like you're never really ever instantiating i, and while you do it with j, you're not doing it early enough.

At the line while(i <= y) the interpreter is basically seeing:

while (undefined <= undefined) {

At some level, I'm honestly not sure that document.writes is really the best solution for you, I would probably recommend using document.createElement instead, but that's perhaps more of a personal preference.

Attempting to step a level further out yet sticking with your methodology, I might look toward something like:

function generateTable (width, height) {
    document.write("<table border=\"3\">");
    var i = 1;
    while (i <= height) {
        document.write("<tr>");
        var j = 1;
        while (j <= width) {
            if (i == 0) {
                // header row
                document.write("<th>"+ j +" x "+ i +"</th>");
            } else {
                document.write("<td>"+ j +" x "+ i +"</td>");
            }
            j++;
        }
        document.write("</tr>");
        i++;
    }
    document.write("</table>");
}

generateTable(5, 10);