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