配列内の各アイテムを繰り返し処理し、HTMLとして出力できますか？

Question

私は、特定の条件をパスすると、ターゲットのプロパティを配列にプッシュするforループを持っています。私は各項目を独自の行に出力するテーブルを作成したいと思います。私にとって難しい部分は、これがどのように動的にできるかを理解することです。配列から各項目をハードコードし、行に挿入するのは簡単です。しかし、これは純粋なJSを使用して自動的に行うことができますか？

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

：

script.js

同じファイルで

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

は、

私は 'myarrayの' からの反復を挿入しようとしている私のテーブルのアウトラインを持っています

myArrayの各項目に対して新しい行を動的に作成するにはどうすればよいですか？

Answer 1

は、ここに1つのアプローチです：

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

あなたは各行をmyarrayのをループを作成すると、より大きな文字列にそれらを連結することができます。代わりに、後にHTMLとして設定する文字列を構築するの

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

、私はこのようなinsertRowでクリーンなアプローチを使用してを選ぶでしょう：

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

this JSFiddleで実証されているように。