Question

单个表行给我一个问题。我用div创建了我想要的东西，但我需要使用表而不是div。我的表有220个单元格，10行和22列。每个单元格必须在i内具有innerHTML的值。这与我想要的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元素。感谢帮助，因为我新手

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

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

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

Answer 3

那是因为DOM在表格{4}}中的流浪表行周围神奇地包裹了一个<tbody>元素。幸运的是，您可以以一种方式重写循环，一次添加所有这些表行，而不是一次添加一行。

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

这是as it is designed to do，它展示了我刚刚写的内容。如果您使用浏览器的开发人员工具检查HTML，您会注意到一个（只有一个）tbody包围所有表行。

另外，如果您想知道，包含该代码的奇怪功能只是一种保持您创建的变量变为全局的奇特方式（因为它们不需要）。有关其工作原理的详细信息，请参阅a JSFiddle。

如何使用循环创建表？

3 个答案: