Question

从多个数组填充 HTML 表

2017-05-31

865

javascript html arrays

我有两个 JavaScript 数组，希望用它们填充 HTML 表格，但似乎无法正确获取 HTML 标签的顺序，从而无法按照我想要的方式布局表格。

HTML：

<div id="dateRangeTable"></div>

JavaScript：

var days = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"];
var sensorEventCount = [41,47,36,0,0,0,0];

function popTable(array, arrayTwo) {
    var list = document.createElement('table');
    var item;
    item = document.createElement('tr');
    for (var i = 0; i < array.length; i++) {
        item = document.createElement('td');
        item.appendChild(document.createTextNode(array[i]));
        list.appendChild(item);
    }
    item.appendChild(document.createElement('tr'));
    for (var i = 0; i < array.length; i++) {    
        item.appendChild(document.createElement('td'));
        item.appendChild(document.createTextNode(arrayTwo[i]));
        list.appendChild(item);
    }
    return list;
}

我正在查看它，每个数组都上下排列，即

Monday   Tuesday   Wednesday   Thursday etc.
  41       47         36           0

目前打印如下：

Monday Tuesday Wednesday Thursday Friday Saturday Sunday
                                                  41
                                                  47
                                                  36
                                                  0
                                                  etc.

Answer 1

问题是您将 <tr> 作为子项附加到 <table> ，然后将 <td> 添加为 <table> 的子项，而不是 <tr> 。

因此，您的代码会显示类似

<table>
    <td>Monday</td>
    ...
    <tr></tr>
    <td>41</td>
    ...
</table>

的 HTML>

此外，您没有将标题放在 <tr> 中>

尝试将您的代码更改为以下内容：

var days = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"];
var sensorEventCount = [41, 47, 36, 0, 0, 0, 0];

function popTable(array, arrayTwo) {
    var list = document.createElement('table');
    var headers = list.appendChild(document.createElement('tr'));
    for (var i = 0; i < array.length; i++) {
        var item = document.createElement('th');
        item.appendChild(document.createTextNode(array[i]));
        headers.appendChild(item);
    }

    list.appendChild(headers);

    var row = list.appendChild(document.createElement('tr'));
    for (var j = 0; j < array.length; j++) {
        var item = document.createElement('td')
        item.appendChild(document.createTextNode(arrayTwo[j]));
        row.appendChild(item);
    }

    list.appendChild(row);
    return list;
}

示例链接

Answer 2

您还可以使用新的模板文字：

一个小示例：

<!DOCTYPE html>
  <html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Array2Table</title>
  </head>
  <body>
    <div id="tableContent"></div>
    <script>
      var country = ["Country1", "Country2", "Country3"];
      var capital = ["City1", "City2" , "City3"];
      
      const tmpl = (country,capital) => `
          <table><thead>
          <tr><th>Country<th>Capital<tbody>
          ${country.map( (cell, index) => `
              <tr><td>${cell}<td>${capital[index]}</tr>
          `).join('')}
          </table>`;
      tableContent.innerHTML=tmpl(country, capital);
      </script> 
  </body>
  </html>