Question

我使用JavaScript获取一些XML数据并将其循环到表中。但是，TD元素不会分成新行。

这是我的HTML：

<div id="gData">
    <table class="tftable" border="1">
        <tr><th>Date</th><th>Game</th><th>Home</th><th>Draw</th><th>Away</th></tr>
        <tr>
            <td class="gDate"></td>
            <td class="gGame"></td>
            <td class="gHome"></td>
            <td class="gDraw"></td>
            <td class="gAway"></td>
        </tr>
    </table>
</div>

这是我的JS：

window['gCallback'] = function(data) {

    var game_data = data.query.results.rsp.fd.sports.sport.leagues.league.events.event; 

    for (var i = 0; i < game_data.length; i++) { 

        $('#gData .gGame').append( '<td>' + game_data[i].homeTeam.name + ' vs ' + game_data[i].awayTeam.name + '</td>   '); 
        $('#gData .gDate').append( '<td>' + game_data[i].startDateTime) + '</td>';  
        $('#gData .gAway').append( '<td>' + game_data[i].periods.period[i].moneyLine.awayPrice) + '</td>';
        $('#gData .gHome').append( '<td>' + game_data[i].periods.period[i].moneyLine.homePrice) + '</td>';
        $('#gData .gDraw').append( '<td>' + game_data[i].periods.period[i].moneyLine.drawPrice) + '</td>';

      }
};

数据从循环中恢复正常，但在一个TD中显示所有日期，在下一个TD中显示所有游戏。

Answer 1

您还必须动态创建tr代码。以下是我的建议：

首先确保您的表格有thead和tbody。

<table id="my-table">
    <thead>
        <th>Date</th>
        <th>Game</th>
        <th>Home</th>
        <th>Draw</th>
        <th>Away</th>
    </thead>
    <tbody></tbody>
<table>

然后，您可以动态生成行并将它们附加到tbody元素。为了节省写作，我只是给出一个不基于你的代码的例子。

var $trs = $(document.createDocumentFragment()), //reduce DOM reflows
    data = [{ a:1, b:2, c:3 }],
    i = 0,
    len = data.length,
    rowData, $tr;

for (; i < len; i++) {
    rowData = data[i];

    $tr = $('<tr>'); //create your row

    //append cells, you can also create a function to encapsulate
    //that repetitive logic
    $tr.append($('<td>').addClass('yourClass').text(rowData.a));
    $tr.append($('<td>').addClass('yourOtherClass').text(rowData.b));
    $tr.append($('<td>').addClass('yetAnotherClass').text(rowData.c));

    //append the tr to the document fragment
    $trs.append($tr);

}

//append the document fragment to the tbody
$('#my-table > tbody').append($trs);

Answer 2

即使是最简单的任务也可以被jQuery扼杀，这是非常了不起的......

var table = document.getElementById('gData').children[0],
    tbody = table.tBodies[0];
window['gCallback'] = function(data) {
    var game_data = data.query.results.rsp.fd.sprts.sport.leages.leage.events.event,
        len = game_data.length, i, tr;
    table.removeChild(tbody);
    for( i=0; i<len; i++) {
        tr = document.createElement('tr');
        tr.appendChild(document.createElement('td'))
                  .appendChild(document.createTextNode(game_data[i].homeTeam.name));
        tr.appendChild(document.createElement('td'))
                  .appendChild(document.createTextNode(game_data[i].startDateTime));
        tr.appendChild(document.createElement('td'))
                  .appendChild(document.createTextNode(game_data[i].periods.period[i].moneyLine.awayPrice));
        tr.appendChild(document.createElement('td'))
                  .appendChild(document.createTextNode(game_data[i].periods.period[i].moneyLine.homePrice));
        tr.appendChild(document.createElement('td'))
                  .appendChild(document.createTextNode(game_data[i].periods.period[i].moneyLine.drawPrice));
        tbody.appendChild(tr);
    }
    table.appendChild(tbody);
};

这个HTML：

<div id="gData">
    <table class="tftable" border="1">
        <thead>
            <tr><th>Date</th><th>Game</th><th>Home</th><th>Draw</th><th>Away</th></tr>
        </thead>
        <tbody></tbody>
    </table>
</div>

请注意，您可以使用辅助函数简化上述代码：

function addCellWithText(tr,text) {
    return tr.appendChild(document.createElement('td')).appendChild(document.createTextNode(text));
}

然后你的循环内容变为：

for(...) {
    tr = document.createElement('tr');
    addCellWithText(tr,game_data[i].homeTeam.name);
    addCellWithText(tr,game_data[i].startDateTime);
    addCellWithText(tr,game_data[i].preiods.period[i].moneyLine.homePrice);
    addCellWithText(tr,game_data[i].preiods.period[i].moneyLine.awayPrice);
    addCellWithText(tr,game_data[i].preiods.period[i].moneyLine.drawPrice);
    tbody.appendChild(tr);
}

JavaScript循环不会分隔元素

2 个答案: