從多個數組中填充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表格

回答

相關問題