JavaScript循环赢了'；t分离<；TD>；元素

我正在使用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>

DategameHomeDraway

这是我的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>';

      }
};

window['gCallback']=函数（数据）{
var game_data=data.query.results.rsp.fd.sports.sport.leagues.leagues.events.event；
对于（var i=0；i

---

数据从循环中很好地返回，但显示了一个TD中的所有日期，以及下一个TD中的所有游戏。

值得注意的是，即使是最简单的任务，jQuery也能完成

var table=document.getElementById（'gData'）.children[0]，
tbody=表.tBodies[0]；
窗口['gCallback']=函数（数据）{
var game_data=data.query.results.rsp.fd.sprts.sport.leages.leage.events.event，
len=游戏数据长度，i，tr；
表2.移除儿童（t身体）；
对于（i=0；i来说，jQuery甚至可以处理最简单的任务，这一点很值得注意

var table=document.getElementById（'gData'）.children[0]，
tbody=表.tBodies[0]；
窗口['gCallback']=函数（数据）{
var game_data=data.query.results.rsp.fd.sprts.sport.leages.leage.events.event，
len=游戏数据长度，i，tr；
表2.移除儿童（t身体）；
对于（i=0；i您还必须动态创建
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>

您还必须动态创建
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>

你在做什么？因为我不认为你在做你认为你在做的事情…不那么神秘，为什么你认为在已经是
的东西上附加一个
是个好主意？看起来你想为每一组TDs渲染一个TR？是的，TDs是单元格，TRs是行。我知道上面的问题会在td内部生成一个td。例如，日期会重复**这里**我需要一种方法为每个循环创建一个新行。你在做什么？因为我不认为你在做你认为你在做的事情…不那么神秘，为什么你认为在已经是
的东西上附加一个
是一个好主意？看起来你想为每个循环都渲染一个TRf TDs？是的，TDs是单元格，TRs是行。我知道上面的问题会在td中生成td。例如，日期会重复**这里**我需要一种方法为每个循环“被jQuery屠宰”生成新行？？？这是一个典型的例子，jQuery可以用来使代码更加一致和可读。当然，这是可以的，但遗憾的是，jQuery是一个提供给太多人的工具……老实说，jQuery不应该是免费的，它只会带来麻烦。我认为问题是人们在不知道JavaScription的情况下使用jQuery，如果使用jQuery，可以节省一个l输入的ot！无论如何+1表示“纯JS”方式；）“被jQuery屠宰”？？？这是一个典型的例子，jQuery可以用来使代码更加一致和可读。当然，这是可以的，但遗憾的是，jQuery是一个提供给太多人的工具……老实说，jQuery不应该是免费的，它只会带来麻烦。我认为问题是人们在不知道JavaScription的情况下使用jQuery，如果使用jQuery，可以节省一个lot of typing！反正+1是“纯JS”的方式；）@plalx答案不错，但是看到数据是如何动态生成的，为什么我不能围绕数据生成一个tr类？'$（'#gData.gDate'）。例如，append（'+game_data[I].startDateTime）+''.@ServerSideSkittles不确定你的意思是什么“数据已经动态生成”。您的代码示例的问题是，
.gDate
是一个单元格，您正在向其中添加另一个单元格。实际上，由于您正在循环，所以有多个单元格。如果您有多行，且所有单元格都已生成，并且您希望将数据放入单元格，则可以执行
$（'#gData.gDate:eq（'+i+'））.text（game_data[i].startDateTime）；
但这将非常低效。@plalx回答得不错，但是看到数据是如何动态生成的，为什么我不能围绕数据生成一个tr类？'$（'#gData.gDate'）。append（'+game_data[i].startDateTime）+''；例如？@ServerSideSkittles不确定您所说的“数据已经动态生成”是什么意思“。您的代码示例的问题是，
.gDate
是一个单元格，您正在向其中添加另一个单元格。实际上，由于您正在循环，所以有多个单元格。如果您有多行，并且所有单元格都已生成，并且您希望将数据放入单元格，则可以执行
$（'#gData.gDate:eq（'+i+'））.text（game#u data[i].startDateTime）
但这样做效率很低。
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);
}

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

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