Javascript 从多个数组填充HTML表

我有两个JavaScript数组，我希望用它们填充HTML表，但我似乎无法正确地获得HTML标记的顺序来布局表

HTML:

目前的印刷方式如下：

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

---

问题是您将作为子项附加到，然后添加作为的子项而不是

因此，您的代码将以HTML格式显示，如

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

此外，您还没有将标题放入

尝试将您的代码更改为：

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

---

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

一个小例子：

可排列 var country=[Country1、Country2、Country3]； var资本=[City1，City2，City3]； const tmpl=国家，首都=>` 乡村资本 ${country.map单元格，索引=>` ${cell}${capital[index]} `.join} `; tableContent.innerHTML=tmplcountry，大写；

---

我没有费心运行代码。但我正在考虑创建一个二维阵列。var数组=[[周一，41]，[周二，47]]。。。然后，只需使用该数组创建一个表就可以了。难道您没有在工作日丢失表头的第一个tr吗？作为旁注，由于每个array=row的代码都是重复的，因此您还可以在数组中循环。这样做的好处是，添加一个额外的行只意味着添加一个额外的参数。ES6可以使用参数数组使这一点更加容易。例如：谢谢您的回答，是否可以将单元格中的值对齐？@ColinShewell当然，我假设您希望它们对齐到右侧？您最好使用css来实现这一点，我已经在示例链接中添加了一条规则，尽管您可能只想在示例链接中添加一个类。

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

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

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