时间戳

首页 > 解决方案 > 如何使用 getElementByID 遍历并制作表格

javascript - 如何使用 getElementByID 遍历并制作表格

问题描述

function myFunction() {
  var table = document.getElementById("myTable");
  var row = table.insertRow(0);
  var cell1 = row.insertCell(0);
  var cell2 = row.insertCell(1);
  cell1.innerHTML = "NEW CELL1";
  cell2.innerHTML = "NEWCELL2";
  for (i = 0; i < 5; i++) {
     row.insertCell(i);
     row.insertRow(0)
     i.innerHTML = "Proof this is Working"
   }
}

我很抱歉，因为我对 Javascript 很陌生，而且它是我的第二语言。

所以我有这个功能，并使用变量将单元格/行插入到 HTML 表中。但是，我正在尝试从表中创建一个网格，所以我需要一个插入单元格和行的 for 循环，因为我需要很多。因此，前几行 var cell1 和 var cell2 可以完美运行，并生成单元格和行。但是 for 循环根本无法正常工作。

我检查了语法，看起来不错。代码看起来应该可以工作，但这是我第一次在 javascript 中编写 for 循环。

我要问的另一件事是，for 循环是否必须具有三个条件？在 python 中，你可以在 x 中做一个 for 行，你应该没问题。但看起来在 javascript 中你需要三个不同的条件。

谢谢！

标签： javascriptgetelementbyid

解决方案

您在这段代码中犯了几个重大错误：

  for (i = 0; i < 5; i++) {
     row.insertCell(i); 
     row.insertRow(0); 
     i.innerHTML = "Proof this is Working";
   }

逐行：

row.insertCell(i);

这会在 for 循环之前定义的行中插入一个新单元格。它将覆盖您在 for 循环之前定义的前两个单元格。

     row.insertRow(0);

我不确定这是做什么的，但它应该会引发错误或生成格式错误的 html。您想在表中插入新行，而不是在现有行中。table.insertRow(0)将覆盖您在 for 循环之前定义的第一行。

 i.innerHTML = "Proof this is Working";

i是一个整数，它不应该具有该属性.innerHTML，并且可能会引发错误。

准确理解您的意图有点困难。如果您的意图是添加 5 个附加行和 5 个单元格，您可以这样做：

function myFunction() {
      var table = document.getElementById("myTable");
      var row = table.insertRow(0);
      var cell1 = row.insertCell(0);
      var cell2 = row.insertCell(1);
      cell1.innerHTML = "NEW CELL1";
      cell2.innerHTML = "NEWCELL2";
      for (let i = 0; i < 5; i++) {
         let newRow = table.insertRow(-1)
         for(let j = 0; j < 5; j++) {
             newRow.insertCell(-1)
         }
       }
    }

newRow.insertCell(-1)将-1新单元格添加到行尾https://www.w3schools.com/jsref/met_tablerow_insertcell.asp

最后是的 for 循环的语法看起来不错，还有其他在 javascript 中迭代的方法：https ://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration

推荐阅读