Javascript 如何使用循环创建表？

单个表行给了我一个问题。我已经用divs创建了我想要的，但是我需要使用一个表而不是divs。我的表格有220个单元格、10行和22列。在

innerHTML

中，每个单元格必须具有

i

的值。这里与使用Divs类似（尽管不必设置单元格的高度和宽度）：

#容器{
宽度：682px；高度：310px；
背景色：#555；字体大小：85%；
}
.cell{
宽度：30px；高度：30px；
背景色：#333；颜色：#ccc；
浮动：左侧；边距右侧：1px；
边缘底部：1px；
}
对于（var i=1；i，这是因为它神奇地将
元素环绕在表中的表行周围。幸运的是，您可以用一种方式重写循环，一次添加所有这些表行，而不是一次添加一行

实现这一点的最简单解决方案是存储一个字符串变量，并将行连接到该变量上。然后，在将行连接到一个字符串中后，可以将表元素的
innerHTML
设置为该字符串，如下所示：

<script>
(function() {
    var rows = '';
    for( var i = 0; i <= 10; i++ )
    {
        rows += '<tr id = "row' + i + '"><td>...</td></tr>';
    }
    document.getElementById( 'table' ).innerHTML = rows;
}());
</script>


（功能（）{
var行=“”；
对于（var i=0；i有很多方法可以做到这一点，但我发现有一种方法很有帮助，那就是创建一个
片段
，然后将所有内容附加到其中。这种方法很快，并且限制了DOM从循环中重新绘制/重新流动

看看这个

以下是修改后的代码：

function newNode(node, text, styles) {
  node.innerHTML = text;
  node.className = styles;
  return node;
}

var fragment = document.createDocumentFragment(),
  container = document.getElementById("container");

for(var i = 1; i <= 10; i++) {
  var tr = document.createElement("tr");
  var td = newNode(document.createElement("td"), i, "cell");
  tr.appendChild(td);
  fragment.appendChild(tr);
}

container.appendChild(fragment);

函数newNode（节点、文本、样式）{
node.innerHTML=文本；
node.className=样式；
返回节点；
}
var fragment=document.createDocumentFragment（），
容器=document.getElementById（“容器”）；
对于（var i=1；i您可以使用嵌套循环执行此操作-一个用于向每行添加单元格，另一个用于向表中添加行

使用
document.createElement（）
而不是动态插入元素的
innerHTML
。
innerHTML
将删除附加到子元素的所有事件，并且每次解析时都必须重新呈现每一行元素。这有助于我前进，但最终目标是使表看起来像这样：。我的计划是循环tH首先通过行，然后在每行的内部，循环通过每个td元素。这可以做到这一点并保持I递增吗？但是其他tds呢？可以做到这一点吗：到表？这太棒了。谢谢！
<script>
(function() {
    var rows = '';
    for( var i = 0; i <= 10; i++ )
    {
        rows += '<tr id = "row' + i + '"><td>...</td></tr>';
    }
    document.getElementById( 'table' ).innerHTML = rows;
}());
</script>

function newNode(node, text, styles) {
  node.innerHTML = text;
  node.className = styles;
  return node;
}

var fragment = document.createDocumentFragment(),
  container = document.getElementById("container");

for(var i = 1; i <= 10; i++) {
  var tr = document.createElement("tr");
  var td = newNode(document.createElement("td"), i, "cell");
  tr.appendChild(td);
  fragment.appendChild(tr);
}

container.appendChild(fragment);

var table = document.createElement('table'), tr, td, row, cell;
for (row = 0; row < 10; row++) {
    tr = document.createElement('tr');
    for (cell = 0; cell < 22; cell++) {
        td = document.createElement('td');
        tr.appendChild(td);
        td.innerHTML = row * 22 + cell + 1;
    }
    table.appendChild(tr);
}
document.getElementById('container').appendChild(table);

var table = document.createElement('table'),
    tr = document.createElement('tr'),
    cells, i;
for (i = 0; i < 22; i++) { // Create an empty row
    tr.appendChild(document.createElement('td'));
}
for (i = 0; i < 10; i++) { // Add 10 copies of it to the table
    table.appendChild(tr.cloneNode(true));
}
cells = table.getElementsByTagName('td'); // get all of the cells
for (i = 0; i < 220; i++) {               // number them
    cells[i].innerHTML = i + 1;
}
document.getElementById('container').appendChild(table);

var table = document.createElement('table'), tr, td, i;
for (i = 0; i < 220; i++) { 
    if (i % 22 == 0) { // every 22nd cell (including the first)
        tr = table.appendChild(document.createElement('tr')); // add a new row
    }
    td = tr.appendChild(document.createElement('td'));
    td.innerHTML = i + 1;
}
document.getElementById('container').appendChild(table);

function make(tag, content) {
  const el = document.createElement(tag);
  content.forEach(c => el.appendChild(c));
  return el;
}

document.getElementById("container").appendChild(make(
    "table", [...Array(10).keys()].map(row => make(
      "tr", [...Array(22).keys()].map(column => make(
        "td", [document.createTextNode(row * 22 + column + 1)]
    ))
  ))
));