Javascript：从2个数组构建html表[重复]答案

【问题标题】：Javascript: build html table from 2 arrays [duplicate]Javascript：从2个数组构建html表[重复]
【发布时间】：2016-09-18 17:11:36
【问题描述】：

几个小时以来，我一直在尝试从两个 javascript 数组中找到构建我的 html <table> 的 tbody 部分的最佳方法。

注意：我可能不会使用 Jquery。

我的数组包含 2 个子数组：

var arParent = [
    ["col1a", "col1b", "col1c"],
    ["col2a", "col2b", "col2c"] 
]

我需要类似的东西：

<tr>
    <td>col1a</td>
    <td>col2a</td>
</tr>
<tr>
    <td>col1b</td>
    <td>col2b</td>
</tr>
<tr>
    <td>col1c</td>
    <td>col2c</td>
</tr>

【问题讨论】：

标签： javascript html

【解决方案1】：

我会首先将这些非表格数据转换为行。然后以正常方式渲染行。

也就是说：

var arParent = [
  ["col1a", "col1b", "col1c", "<b>&amp;</b>"],
  ["col2a", "col2b", "col2c", "<a href='http://google.com'>googles</a>"]
]


function transformData(arr) {
  // transform columns into rows
  var rows = [];
  for (var i = 0, iLen = arr.length; i < iLen; i++) {
    var cols = arr[i];
    for (var j = 0, jLen = cols.length; j < jLen; j++) {
      var row;
      if (i === 0) {
        row = {
          columns: []
        };
        rows.push(row);
      } else {
        row = rows[j];
      }
      var col = cols[j];
      row.columns.push(col);
    }
  }
  return rows;
}

// from http://stackoverflow.com/questions/1219860/html-encoding-in-javascript-jquery
function htmlEscape(str) {
    return String(str)
        .replace(/&/g, '&amp;')
        .replace(/"/g, '&quot;')
        .replace(/'/g, '&#39;')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;');
}

function renderTableData(rows) {
  var html = [];
  for (var r = 0, rLen = rows.length; r < rLen; r++) {
    var row = rows[r];
    html.push("<tr>");
    for (var c = 0, cLen = row.columns.length; c < cLen; c++) {
      var col = row.columns[c];
      html.push("<td>");
      html.push(htmlEscape(col));
      html.push("</td>");
    }
    html.push("</tr>");
  }
  var tbody = document.getElementById('tabledata');
  tbody.innerHTML = html.join('');
}

var rows = transformData(arParent);

console.log(JSON.stringify(rows));

renderTableData(rows);

td {
  padding: 2px 4px;
  font-family: "Segoe UI", Arial, sans-serif;
  border: 1px solid #ccc;
}

<table>
  <tbody id='tabledata'>
  </tbody>
</table>

你可以写得更简洁，但我特意把它分解成简单的小语句，以便你可以跟随并理解例程。

【讨论】：

【解决方案2】：

我会把它放在你的身体元素中。遍历数组中的每一行，然后在每一行中遍历每一列并一一添加。

--> 请注意，行数由第一个数组元素的行数决定。

    <body>
        <style>
            table, tr, td {
                border: solid 1px;
            }
        </style>
        <script>
        (function() {

        var arParent = [
            ["col1a", "col1b", "col1c"],
            ["col2a", "col2b", "col2c"] 
        ];

        var table = document.createElement("table");

        for (i = 0; i < arParent[0].length; i++) {
            var row = document.createElement("tr");
            for (j = 0; j < arParent.length; j++) {
                var column = document.createElement("td");
                var content = document.createTextNode(arParent[j][i]);
                column.appendChild(content);
                row.appendChild(column);
            }
            table.appendChild(row);
        }

        document.body.appendChild(table);
        })();
    </script>
<body>

【讨论】：

【解决方案3】：

您可以先将行转换为列，然后添加到table

var ar = [
  ["col1a", "col1b", "col1c"],
  ["col2a", "col2b", "col2c"]
], table = document.querySelector('table tbody');

//Convert rows to columns
var r = ar[0].map(function(col, i) {
  return ar.map(function(row) {
    return row[i];
  });
});

//Add data to table
r.forEach(function(e) {
  table.innerHTML += '<tr><td>' + e[0] + '</td><td>' + e[1] + '</td></tr>'
})

<table>
  <tbody></tbody>
</table>

【讨论】：

您的解决方案正是我所需要的。您的代码简短而强大。我太喜欢它了。谢谢。