在javascript中使用document.write创建一个表

Question

I seem to get nothing when I run my code, my code is supposed to create a 10 by 10 table. I am supposed to make it while using this form . And it is also supposed to use a for loop so that I dont have to repeat myself like 100 times.

document.write("<table>") 
document.write("<td>......") 
document.write("</table>")

This is my current code that I need to improve.

<script>

       var table = " ";
       var rows = 10;
       var cols = 10;
       for (var r= 0; r < rows;r++)
       {
       table += "<tr>";
       for(var c = 1; c <= cols; c++)
       {

      table += "<td>" + c + "</td>";
       }
       table += "</td>";

       }
      document.write("<table border=1>" + table + "</table>");

       }
</script> 

Answer 1

Your code is faulty because you have an invalid curly brace at the end and you never end your first <tr> .

Here is a corrected version of your code:

   var table = " ";
   var rows = 10;
   var cols = 10;
   for (var r= 0; r < rows;r++)
   {
     table += "<tr>";
     for(var c = 1; c <= cols; c++)
     {
       table += "<td>" + c + "</td>";
     }
     table += "</tr>";
   }
   document.write("<table border=1>" + table + "</table>");

I changed the line

table += "</td>"

to:

table += "</tr>"

and I removed the curly brace at the end.

Here is a working example of the code, https://jsfiddle.net/h2qf9aj4/

Answer 2

document.write() actually deletes everything then writes the text on the inside. So what you are doing is writing a page, deleting and writing something different, then writing another something...

What you can do is append by doing

document.getElementByTagName('body')[0].innerHTML += "<table>"

to create something at the end of the inner HTML body tag

Answer 3

Here's an alternative to document.write and concatenation:

<script>
  var table = document.createElement("table");
  var rows = 10;
  var cols = 10;

  for(var r = 0; r < rows; r++){
    var row_create = document.createElement("tr");

    for(var c = 0; c < cols; c++){
      var col_create = document.createElement("td");
      row_create.appendChild(col_create);
    }

    table.appendChild(row_create);
  }

  document.body.appendChild(table);
</script>