在javascript中使用document.write創建一個表

Question

當我運行我的代碼時，我似乎什么也沒得到，我的代碼應該創建一個 10 x 10 的表。 我應該在使用這個表格時做到這一點。 它也應該使用 for 循環，這樣我就不必重復 100 次。

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

這是我當前需要改進的代碼。

<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

你的代碼有問題，因為你在最后有一個無效的花括號，你永遠不會結束你的第一個<tr> 。

這是您的代碼的更正版本：

   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>");

我換了線

table += "</td>"

到：

table += "</tr>"

最后我去掉了花括號。

這是代碼的一個工作示例， https://jsfiddle.net/h2qf9aj4/

Answer 2

document.write() 實際上會刪除所有內容，然后在里面寫入文本。 所以你正在做的是寫一個頁面，刪除和寫一些不同的東西，然后寫另一個東西......

你可以做的是通過做附加

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

在內部 HTML body 標簽的末尾創建一些東西

Answer 3

這是 document.write 和串聯的替代方法：

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