如何使用循环创建表？答案

【问题标题】：How to create a table using a loop?如何使用循环创建表？
【发布时间】：2014-12-21 23:41:40
【问题描述】：

个别表格行给我带来了问题。我已经使用 div 创建了我想要的东西，但我需要使用表格而不是 div。我的表格有 220 个单元格、10 行和 22 列。每个单元格必须在innerHTML 内具有i 的值。这类似于我想要使用 Divs 的内容（尽管不必设置单元格的高度和宽度）：

<!DOCTYPE html>
<html>
    <head>
        <style>
            #container{ 
            width:682px; height:310px; 
            background-color:#555; font-size:85%;
            }

            .cell { 
            width:30px; height:30px;
            background-color:#333; color:#ccc;
            float:left; margin-right:1px;
            margin-bottom:1px;
            }
        </style>
    </head>

    <body>
        <div id="container">
            <script>
                for( var i = 1; i <= 220; i++ ){
                    document.getElementById( 'container' ).innerHTML += 
                    '<div class="cell">' + i + '</div>'
                }
            </script>
        </div>
    </body>
</html>

http://jsfiddle.net/8r6619wL/

这是我使用表格的开始尝试：

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

但是该代码以某种方式动态地创建了一堆 tbody 元素。感谢您的帮助，因为我是新手

【问题讨论】：

使用document.createElement() 而不是innerHTML 来动态插入元素。 innerHTML 将删除附加到子元素的所有事件，并且每次解析时都必须重新渲染每个单独的行元素。

标签： javascript loops

【解决方案1】：

您可以使用嵌套循环来执行此操作 - 一个用于将单元格添加到每一行，另一个用于将行添加到表中。 JSFiddle

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);

Alternatively，你可以创建一个22个单元格的空行，克隆10次，然后将数字添加到单元格中。

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);

还有一个third option：在一个循环中添加单元格，每 22 个单元格创建一个新行。

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);

编辑 - 现在（2021 年）我将如何做到这一点......使用某种帮助函数来构建 dom 元素，并使用 map。

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)]
    ))
  ))
));

【讨论】：

这太棒了。谢谢！

【解决方案2】：

有很多方法可以做到这一点，但我发现一个有用的方法是创建一个fragment，然后将所有内容附加到其中。它速度很快，并且限制了循环中的 DOM 重新绘制/重新流动。

看看这个jsbin example。

修改后的代码如下：

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);

你可以在循环中修改任何你想要的东西，但这应该能让你开始。

【讨论】：

那么其他 tds 呢？是否可以这样做：jsfiddle.net/8r6619wL 到桌子上？

【解决方案3】：

这是因为DOM 神奇地将<tbody> 元素包裹在表中的杂散表行周围，as it is designed to do。幸运的是，您可以重写循环，一次添加所有这些表行，而不是一次添加一个。

实现此目的的最简单解决方案是存储一个字符串变量，并将您的行连接到该变量上。然后，在将行连接成一个字符串后，您可以将表元素的 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>

这里是a JSFiddle，它演示了我刚刚写的内容。如果您使用浏览器的开发人员工具检查 HTML，您会注意到一个（并且只有一个）tbody 环绕了所有表行。

另外，如果您想知道，包裹该代码的看起来很奇怪的函数只是一种防止您创建的变量成为全局变量的奇特方式（因为它们不需要成为全局变量）。有关其工作原理的更多详细信息，请参阅this blog post。

【讨论】：

这有助于我前进，但最终目标是让表格看起来像这样：jsfiddle.net/8r6619wL。我的计划是先遍历行，然后在每行内部，遍历每个 td 元素。这有可能做到这一点并让我不断增加吗？

【解决方案4】：

请检查一下。这是一种使用js和HTML创建表格的非常简单的方法

<body>
    <table cellspacing="5" >
        <thead>
            <tr>
                <td>Particulate count</td>
                <td>Temperature</td>
                <td>Humidity</td>
            </tr>
        </thead>
        <tbody id="xxx">

        </tbody>
    </table>

    <script>
        for (var a=0; a < 2; a++) {
            var table1 = document.getElementById('xxx');
            var rowrow =  document.createElement('tr');
        
            for ( i=0; i <1; i++) {
                var cell1  =  document.createElement('td');
                var text1 = document.createTextNode('test1'+a);

                var cell2  =  document.createElement('td');
                var text2 = document.createTextNode('test2'+a);

                var cell3  =  document.createElement('td');
                var text3 = document.createTextNode('test3'+a);

                cell1.appendChild(text1);
                rowrow.appendChild(cell1);

                cell2.appendChild(text2);
                rowrow.appendChild(cell2);

                cell3.appendChild(text3);
                rowrow.appendChild(cell3);
            }
            table1.appendChild(rowrow);
        }
    </script>
</body>
</html>

【讨论】：