从 2D JavaScript 数组生成 HTML 表格

IT技术 javascript html-table
2021-02-12 00:55:04

在 JavaScript 中,是否可以从二维数组生成 HTML 表格?编写 HTML 表格的语法往往非常冗长,所以我想从一个 2D JavaScript 数组生成一个 HTML 表格,如下所示:

[
  ["row 1, cell 1", "row 1, cell 2"], 
  ["row 2, cell 1", "row 2, cell 2"]
]

会成为:

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

因此,我正在尝试编写一个 JavaScript 函数,该函数将从 2D JavaScript 数组中返回一个表,如下所示:

function getTable(array){
  // take a 2D JavaScript string array as input, and return an HTML table.
}
6个回答

这是一个将使用 dom 而不是字符串连接的函数。

function createTable(tableData) {
  var table = document.createElement('table');
  var tableBody = document.createElement('tbody');

  tableData.forEach(function(rowData) {
    var row = document.createElement('tr');

    rowData.forEach(function(cellData) {
      var cell = document.createElement('td');
      cell.appendChild(document.createTextNode(cellData));
      row.appendChild(cell);
    });

    tableBody.appendChild(row);
  });

  table.appendChild(tableBody);
  document.body.appendChild(table);
}

createTable([["row 1, cell 1", "row 1, cell 2"], ["row 2, cell 1", "row 2, cell 2"]]);
这有效,但它比我找到的其他答案更冗长。
2021-03-22 00:55:04
如果冗长让您感到困扰,我建议使用诸如 Jquery 之类的库来简化其中一些方法调用。
2021-04-02 00:55:04
dom 很冗长,但比innerHTML 更安全。
2021-04-03 00:55:04
您的解决方案似乎生成了一段文本而不是生成表格:jsfiddle.net/jCVmZ
2021-04-10 00:55:04
安德森你的答案是一个字符串建设者,请原谅我们。他的回答是完全正确的,并没有生成一个段落。它完全按照描述制作表格。(如果您不相信,请右键单击并检查元素)。这比您的答案或丹尼尔的答案正确得多。您应该使用 DOM,而不是一些 html 字符串注入。
2021-04-13 00:55:04

使用双 for 循环很容易做到这一点。

function makeTableHTML(myArray) {
    var result = "<table border=1>";
    for(var i=0; i<myArray.length; i++) {
        result += "<tr>";
        for(var j=0; j<myArray[i].length; j++){
            result += "<td>"+myArray[i][j]+"</td>";
        }
        result += "</tr>";
    }
    result += "</table>";

    return result;
}
这不能很好地处理包含<或 的字符串&
2021-03-19 00:55:04
这是最好的答案。
2021-03-20 00:55:04
使用 DOM,卢克!
2021-04-05 00:55:04

另一个没有innerHTML 的版本。

function makeTable(array) {
    var table = document.createElement('table');
    for (var i = 0; i < array.length; i++) {
        var row = document.createElement('tr');
        for (var j = 0; j < array[i].length; j++) {
            var cell = document.createElement('td');
            cell.textContent = array[i][j];
            row.appendChild(cell);
        }
        table.appendChild(row);
    }
    return table;
}
有没有比嵌套循环更好的方法?
2021-03-29 00:55:04

Daniel Williams 的回答的 es6 版本:

  function get_table(data) {
    let result = ['<table border=1>'];
    for(let row of data) {
        result.push('<tr>');
        for(let cell of row){
            result.push(`<td>${cell}</td>`);
        }
        result.push('</tr>');
    }
    result.push('</table>');
    return result.join('\n');
  }

请参阅小提琴演示以从数组创建表

function createTable(tableData) {
  var table = document.createElement('table');
  var row = {};
  var cell = {};

  tableData.forEach(function(rowData) {
    row = table.insertRow(-1); // [-1] for last position in Safari
    rowData.forEach(function(cellData) {
      cell = row.insertCell();
      cell.textContent = cellData;
    });
  });
  document.body.appendChild(table);
}

你可以像这样使用它

var tableData = [["r1c1", "r1c2"], ["r2c1", "r2c2"], ["r3c1", "r3c2"]];
createTable(tableData);