javascript - 从多个数组填充 HTML 表

Question

我希望使用两个 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>作为一个 child ，然后添加 <td>成为 <table> 的 child 而不是 <tr> .

所以你的代码会带有像

这样的 HTML

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

此外，您还没有将 header 放入 <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;
}

Example Link