1

私は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>
4

3 に答える 3

2

例はこちら

この方法でやりたいことができます：

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);
}
于 2013-09-16T13:05:59.470 に答える
1

Try this and you may have to adjust it based on your HTML layout.

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>');
于 2013-09-16T12:59:32.807 に答える