将javascript数组映射到html表

Question

我想创建一个函数，将表示为嵌套数组的网格映射到html表。

例如，列表：

[
    ['a', 'b', 'c'],
    ['d', 'e', 'f'],
    ['f', 'g', 'h']
]

并修改html表以显示：

a b c 
d e f
f g h

假设预定的表格大小和列表匹配维度。

完成的事情：

table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>


<script>
update = [['a','b'],['c','d']]

function updateTableHTML(myArray) {
  // maps the list onto the existing table
}

updateTableHTML(update)
</script>

Answer 1

您可以使用Array.prototype.forEach method或简单的for循环。您只需逐步执行二维数组的每个组件，并在表格中创建<td> 元素。

顺便说一句，我对表已经有正确的行数和列数（即update数组符合表的维度）的假设感到不舒服：它＆＃ 39;最好从头开始重新构建<tbody>以避免任何错误并创建更灵活的功能。因此，让我们假设一个这样的初始情况：

<table>
    <tbody id="your-table-body-id">
        <!-- whatever... -->
    </tbody>
</table>

旧学校for循环

以下是简单for循环的示例：

function updateTableHTML(myArray) {
    var tableBody = document.getElementById("your-table-body-id"),
        newRow, newCell;

    // Reset the table
    tableBody.innerHTML = "";

    // Build the new table
    for (var i=0; i < myArray.length; i++) {
        newRow = document.createElement("tr");
        tableBody.appendChild(newRow);

        if (myArray[i] instanceof Array) {
            for (var j=0; j < myArray[i].length; j++) {
                newCell = document.createElement("td");
                newCell.textContent = update[i][j];
                newRow.appendChild(newCell);
            }
        } else {
            newCell = document.createElement("td");
            newCell.textContent = myArray[i];
            newRow.appendChild(newCell);
        }
    }
}

花式Array方法

以下是Array.prototype.forEach方法的示例：

function updateTableHTML(myArray) {
    var tableBody = document.getElementById("your-table-body-id");

    // Reset the table
    tableBody.innerHTML = "";

    // Build the new table
    myArray.forEach(function(row) {
        var newRow = document.createElement("tr");
        tableBody.appendChild(newRow);

        if (row instanceof Array) {
            row.forEach(function(cell) {
                var newCell = document.createElement("td");
                newCell.textContent = cell;
                newRow.appendChild(newCell);
            });
        } else {
            newCell = document.createElement("td");
            newCell.textContent = row;
            newRow.appendChild(newCell);
        }
    });
}

注释

请注意，每个浏览器（即Internet Explorer＆lt; 9）可能不支持Array.prototype.forEach方法。 for方法对我来说更容易理解（虽然我不确定哪一个更快），但这是您的选择。

此外，如果您想知道：我正在检查if (row instanceof Array)，因为在以下情况中：

update = ["a", "b", "c"];

我假设您想要这样的结果：

a
b
c

因此，在重新循环并构建每行的单元格之前，您必须检查该值是否为数组。

Answer 2

这样做

var a = [
   ['a', 'b', 'c'],
   ['d', 'e', 'f'],
   ['f', 'g', 'h']
];
var html = "<table>";
for(var i in a){
    html += "<tr>";
      for(var j in a[i])
        html += "<td>"+a[i][j]+"</td>";
    html += "</tr>";
}

html += "</table>";
document.write(html);

Answer 3

简单解决方案

既然你说你绝对确定尺寸都匹配，那么你可以简单地做

function updateTableHTML(update) {
    var cells = table.querySelectorAll('td');                       // get cells
    update = Array.concat.apply([], update);                        // flatten array
    update . forEach(function(v, i) { cells[i].textContent = v; }); // update
}

cells只是所有<td>元素（平面）的列表。

我们使用update使用Array#concat展平apply嵌套数组。 Array.concat.apply([], [[1, 2], [3, 4]])变为[].concat([1, 2], [3,4])，产生[1, 2, 3, 4]。

现在我们有两个并行的一维数组，所以我们只需要遍历update数组并将相应元素（单元格）的内容设置为每个值。