DOM 创建了表，但并非所有列都有单元格

Question

我正在制作一个你可以输入的网站。我正在桌子上工作。只有一列有单元格。所有其他内容均为空白。我该怎么办？

法典：

var i = 0;
var j = 0;
var row = 10;
var col = 10;
row += 1;
col += 1;
var headingChild = document.createElement("table");
var headingParent = document.getElementsByClassName("editable")[0];
headingParent.appendChild(headingChild);
while (i < row) {
var rowParent = headingChild.insertRow(-1);
while (j < col) {
var cellParent = rowParent.insertCell(-1);
cellParent.style = "border: solid;";
j++;
}
i++;
}

td {
visibility: visible;
display: block;
}

<div contenteditable="true" class="editable">

谢谢！

Answer 1

您需要将每一行的j重置回0。最小的变化是：

var i = 0;
var j = 0;
var row = 10;
var col = 10;
row += 1;
col += 1;
var headingChild = document.createElement("table");
var headingParent = document.getElementsByClassName("editable")[0];
headingParent.appendChild(headingChild);
while (i < row) {
var rowParent = headingChild.insertRow(-1);
j = 0; // <=========================================== here
while (j < col) {
var cellParent = rowParent.insertCell(-1);
cellParent.style = "border: solid;";
j++;
}
i++;
}

td {
visibility: visible;
display: block;
}

<div contenteditable="true" class="editable">

。但实际上，这是for循环的工作：

// *** Removed i and j here
var row = 10;
var col = 10;
row += 1;
col += 1;
var headingChild = document.createElement("table");
var headingParent = document.getElementsByClassName("editable")[0];
headingParent.appendChild(headingChild);
for (var i = 0; i < row; ++i) {                   // ***
var rowParent = headingChild.insertRow(-1);
for (var j = 0; j < col; ++j) {                 // ***
var cellParent = rowParent.insertCell(-1);
cellParent.style = "border: solid;";
// *** Removed j++;
}
// *** Removed i++;
}

td {
visibility: visible;
display: block;
}

<div contenteditable="true" class="editable">