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