Ist es möglich, jedes Element in einem Array zu durchlaufen und als HTML auszugeben?

Question

Ich habe eine for-Schleife, die gezielte Eigenschaften in ein Array schiebt, wenn sie eine bestimmte Bedingung bestehen. Ich möchte eine Tabelle erstellen, die jedes Element in eine eigene Zeile ausgibt. Der schwierige Teil für mich ist zu verstehen, wie dies dynamisch gemacht werden kann. Es ist einfach, jedes Element aus dem Array fest zu codieren und es in eine Reihe einzufügen. Aber kann dies automatisch mit reinem JS getan werden?

script.js

var myArray = []; 
for (var i = 0; i < ccirdata.length; i++) { 
    if (ccirdata[i].catType === 'I') {  
     myArray.push(ccirdata[i].catNum); 
    } 
}; 

In der gleichen Datei,

Ich habe den Entwurf für meinen Tisch, an dem ich versuche, die Iterationen von 'myArray' einzufügen:

var header = 
      "<thead>" + 
      "<tr>" + 
      "<td class='legend-color-guide'><div style='background-color: " + series.color + ";'></div></td>" + 
      "<td class='key'>" + " My Table:</td>" + 
      "</tr>" + 
      "</thead>"; 

var rows = 
      "<tr>" + 
      "<td class='key'><strong>" + <INSERT HERE> + "</strong></td>" + 
      "</tr>" 

return "<table>" + header + "<tbody>" + rows +"</tbody>" + "</table>"; 

Wie kann ich dynamisch eine neue Zeile für jedes Element in myArray erstellen?

Answer 1

Hier ist ein Ansatz:

// using the same header code you provided 

var rows = ""; 
myArray.forEach(function(item, index) { 
    rows += "<tr>"; 
    rows += "<td class='key'><strong>" + item + "</strong></td>"; 
    rows += "</tr>"; 
}); 
return "<table>" + header + "<tbody>" + rows +"</tbody>" + "</table>"; 

Answer 2

Sie können Schleife durch myArray jede Zeile zu erstellen und sie in einen größeren String verketten.

var rows = ""; 
for (var r = 0; r < myArray.length; r++) { 
    var row = "<tr>" + "<td class='key'><strong>" + myArray[r] + "</strong></td></tr>"; 
    rows = rows.concat(row); 
} 

Answer 3

Anstatt eine Textzeichenfolge zu bauen später als HTML auf, würde ich für die Verwendung eines sauberer Ansatz mit insertRow wie folgt entscheiden:

<table> 
    <thead> 
    <tr><td>A header</td></tr> 
    </thead> 
    <tbody> 
    </tbody> 
</table> 
<script type="text/javascript"> 
    var values = ['foo', 'bar', 'baz']; // Values to insert in table 

    // Get a reference to the <tbody> element 
    var tbody = document.querySelector('tbody'); 

    for (var i = 0; i < values.length; i++) { 
    // This appends a new row to the <tbody> and returns a reference 
    // to that element 
    var row = tbody.insertRow(); 

    // Similarly to append a cell to the row 
    var cell = row.insertCell(); 

    // Create a text node for the textual content and append it 
    // to the cell 
    var text = document.createTextNode(values[i]); 
    cell.appendChild(text); 
    } 
</script> 

Wie in this JSFiddle demonstriert.