HTML-Tabelle aus mehreren Arrays auffüllen

Ich habe zwei JavaScript-Arrays, die ich HTML-Tabellen füllen möchte, aber ich kann nicht scheinen, um die Reihenfolge der HTML-Tags korrekt zu erhalten, um die Tabelle so zu gestalten, wie ich suche.HTML-Tabelle aus mehreren Arrays auffüllen

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

Ich suche es mit jedem Array in Zeile über und untereinander, also

Monday Tuesday Wednesday Thursday etc. 
    41  47   36   0

Im Moment angezeigt Drucken wie:

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

Quelle

2017-05-31 Colin747

ich nicht die Mühe versucht, den Code auszuführen. Aber ich denke daran, ein 2D-Array zu erstellen. 'var array = [[" Montag ", 41], [" Dienstag ", 47]] ...' dann einfach eine Tabelle mit diesem Array erstellen – iamdevlinph

fehlt dir nicht die erste tr für den Tabellenkopf (Wochentage) ? – Sepultura

Als eine Randnotiz, da der Code für jedes Array (= Zeile) wiederholt wird, könnten Sie auch die Arrays durchlaufen. Das hätte den Vorteil, dass das Hinzufügen einer zusätzlichen Zeile nur einen zusätzlichen Parameter hinzufügen würde. ES6 könnte das mit einem Parameterarray noch einfacher machen. Zum Beispiel: https://jsfiddle.net/3fbmamLo/ –

Das Problem ist, dass Sie die <tr> zum <table> als Kind sind anhängen und dann die <td> ein Kind der <table> anstelle der <tr> zu sein.

So kommt Ihr Code mit dem HTML-out wie

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

Außerdem haben Sie nicht Ihre Header in einem <tr>

Puting Versuchen Sie den Code zu ändern, dies zu sein:

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

Quelle

2017-05-31 10:03:10 George

Danke für Ihre Antwort, ist es möglich, die Werte innerhalb der Zellen auszurichten? – Colin747

@ColinShewell natürlich, ich nehme an, Sie wollen sie nach rechts ausgerichtet? Du solltest das besser mit CSS machen. Ich habe eine Regel zu der Beispielverknüpfung hinzugefügt, obwohl du vielleicht stattdessen einfach eine Klasse auf die '' setzen möchtest. – George

Das ist großartig, danke! – Colin747

Sie können auch das neue tem verwenden wörtliche Platte:

Ein kleines Beispiel:

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

Quelle

2017-05-31 10:26:19

HTML-Tabelle aus mehreren Arrays auffüllen

Antwort

Verwandte Themen