JSON數據表的javaScript不使用jQuery

Question

我有JSON數據

var schedule = [ 
{ date: "Monday, 9:00am", team1: "Chasing", team1Score: "13", team2: "Amsterdam Money Gang", team2Score: "9"}, 
{ date: "Monday, 9:00am", team1: "Boomsquad", team1Score: "15", team2: "Beast Amsterdam", team2Score: "11"}, 
]; 

現在我需要它，只有使用JavaScript（所以加下表沒有jQuery的，但我們可以使用微庫）

<tr> 
    <td data-bind="date"></td> 
    <td data-bind="team1"></td> 
    <td data-bind="team1score"></td> 
    <td data-bind="team2"></td> 
    <td data-bind="team2score"></td> 
</tr> 

我用的是通過數組下循環，只是現在我不知道如何使一個新的TR上的每個陣列行

var len = schedule.length; 

for (var i=0; i < len; i++) { 

} 

所以我試圖讓下面的輸出

   <tr> 
        <td>Monday, 9:00am</td> 
        <td class="winner">Chasing</td> 
        <td>13 - 9</td> 
        <td>Amsterdam Money Gang</td> 
       </tr> 

       <tr> 
        <td>Monday, 9:00am</td> 
        <td class="winner">Boomsquad</td> 
        <td>15 - 11</td> 
        <td>Beast Amsterdam</td> 
       </tr> 

Answer 1

Example here

你可以做你想做的是這樣的：

var len = schedule.length; 
var table = document.getElementById('table1'); 

for (var i=0; i < len; i++) { 
    var tr = document.createElement('tr'); 
    var s = schedule[i]; 

    var td = document.createElement('td'); 
    td.innerHTML = s.date; 
    tr.appendChild(td); 

    td = document.createElement('td'); 
    td.innerHTML = s.team1; 
    tr.appendChild(td); 

    td = document.createElement('td'); 
    td.innerHTML = s.team1Score; 
    tr.appendChild(td); 

    td = document.createElement('td'); 
    td.innerHTML = s.team2; 
    tr.appendChild(td); 

    td = document.createElement('td'); 
    td.innerHTML = s.team2Score; 
    tr.appendChild(td); 

    table.appendChild(tr); 
} 

Answer 2

在每一個新的數組，你應該創建一個新的TR元素 請看看下面的example

Answer 3

試試這個，你可能要根據您的HTML佈局調整它。

var schedule = [ 
{ date: "Monday, 9:00am", team1: "Chasing", team1Score: "13", team2: "Amsterdam Money  Gang", team2Score: "9"}, 
{ date: "Monday, 9:00am", team1: "Boomsquad", team1Score: "15", team2: "Beast Amsterdam", team2Score: "11"}, 
]; 

document.write('<table>'); 
for(var i = 0; i < schedule.length; i++) 
{ 
    var obj = schedule[i]; 

    document.write('<tr><td>' + obj.date + '</td><td class="winner">' + obj.team1 + '</td><td>' + obj.team1Score + ' - ' + obj.team2Score + '</td><td>' + obj.team2 + '</td></tr>'); 
} 
document.write('</table>');