从多个数组中填充HTML表格

我有两个JavaScript数组，我希望使用它来填充HTML表格，但我似乎无法获得正确的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.

来源

2017-05-31 Colin747

我没有理会试图运行的代码。但我正在考虑创建一个2D数组。 'var array = [[“星期一”，41]，[“星期二”，47]] ...'然后用这个数组创建一个表 – iamdevlinph

是不是缺少表头的第一个tr（平日）？ – Sepultura

请注意，由于代码对每个数组（=行）都重复执行，因此您还可以遍历数组。这样做的好处是可以添加额外的一行，只需要添加一个额外的参数即可。使用参数数组可以使ES6更容易。例如：https：//jsfiddle.net/3fbmamLo/ –

的问题是要追加的<tr>到<table>作为一个孩子，然后加入<td>是<table>代替<tr>的孩子。

所以，你的代码出来与像

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

另外，HTML，你没有puting你的头在<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

来源

2017-05-31 10:03:10 George

感谢您的回答，是否可以对齐单元格中的值？ – Colin747

@ColinShewell当然，我假设你想让他们与右边对齐？你最好用CSS来做这件事，我已经给示例链接添加了一条规则，尽管你可能只想把一个类放在''上。 – George

太好了，谢谢！ – Colin747

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

一个小例子：

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

来源

2017-05-31 10:26:19

从多个数组中填充HTML表格

回答

相关问题