如何使用 getElementByID 循环访问和创建表

Question

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中你需要三个不同的条件。

谢谢！

Answer 1

你在这个代码块中犯了几个主要错误：

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

Answer 2

我的问题是您要插入 5 行还是 5 个单元格？ 这是我要做的：

// insert a single row given the cells as an array
function insertRow( table, cells ) {
const row = table.insertRow(-1); // append a row at the bottom of the table
for( var i = 0; i < cells.length; i++ ) {
const cell = row.insertCell( i );
cell.innerHtml = cells[i];
}
}
// insert a series of rows given the input array
function insertRows( table, rows ) {
for( var i = 0; i < rows.length; i++ ) {
insertRow( table, rows[i] );
}
}
function main() {
const table = document.getElmentById('#someTable');
insertRows( table, [
[ 'Moon Landing', 'July 20, 1969', 'Neil Armstrong' ],
[ 'Hoover Dam', 'Sept 30, 1935', 'Franklin D. Roosevelt' ],
[ 'ARPANET First Packet', 'Oct 29, 1969', 'UCLA,UC Berkley' ]
] );
}

Answer 3

您当前的代码有一些问题。

1. row.insertRow(0)不能在行中插入行。
2. i.innerHTML = "Proof this is Working"i是保存循环当前索引的变量。整数没有属性innerHTML。您可能希望设置单元格的内容。在这种情况下，您首先必须将单元格保存到变量中。const cell = row.insertCell(i)然后cell.innerHTML = "Proof thiis is working".

下面是一个示例：

function myFunction() {  
const table = document.getElementById("myTable");
for (let rowNr = 0; rowNr < 7; ++rowNr) {
const row = table.insertRow();
for (let colNr = 0; colNr < 3; ++colNr) {
const cell = row.insertCell();
cell.innerHTML = `row ${rowNr} - column ${colNr}`;
}
}
}
myFunction();

td { border: 1px solid black; }

<table id="myTable"></table>

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

for 循环不必具有三个条件。以下是不同类型的 for 循环：

1. for是您当前使用的版本。这是一个通用的 for 循环，包含 3 个部分：初始化、条件和定稿。

2. for...in此版本主要用于循环对象的属性。

3. for...of这个版本主要用于循环遍历可迭代对象的元素，如数组、集合、映射。这个循环最接近Python中使用的循环。

   例如：

   for (const line of lines) console.log(line);
   

4. for await...of与for...of类似，但与异步编程相关。暂时不要担心这个。