Question

for(var i=0;i<Result.length;i++){
    $('<tr>').appendTo('#resultstable');

    for(var j=0;j<tableID.length;j++){
        $('<td>' + Result[i][tableID[j]] + '</td>').appendTo('#resultstable');
                    }
        $('</tr>').appendTo('#resultstable');

当尝试从JSON数据显示表时，它会正确显示标题（此处未显示），但是当我希望数据显示在新行上时，它不起作用。第一行数据显示正确，但第二行应该从第一行的末尾继续。

在HTML（加载时）中，它显示为：

..Table headers..
<tbody>
<tr></tr>
</tbody>
<td>1</td>
...Rest of cell data is put in <td> tags...

Answer 1

这种情况正在发生，因为

$('<tr>').appendTo('#resultstable');

创建<tr></tr> dom元素并将其添加到#resultstable表。

使用此声明

$('<td>' + Result[i][tableID[j]] + '</td>').appendTo('#resultstable');

您不是在<tr>之后添加html。您正在创建td标记并将其分配给#resultstable表。但是td标记只能分配给tr标记。

所以正确的语法将是。

for(var i=0;i<Result.length;i++){
var tr = $('<tr>').appendTo('#resultstable');

for(var j=0;j<tableID.length;j++) {
    $('<td>' + Result[i][tableID[j]] + '</td>').appendTo(tr);
}

Answer 2

您要在表格之后附加数据，而不是在最后一行之后，请参阅Add table row in jQuery以获取有关如何在最后一行之后添加行的更多信息。

Answer 3

您不会将<td>元素附加到表格中，您必须将它们附加到刚刚添加的行中。

for(var i=0;i<Result.length;i++){
    var row = $('<tr>').appendTo('#resultstable');

    for(var j=0;j<tableID.length;j++){
        $('<td>' + Result[i][tableID[j]] + '</td>').appendTo(row);
    }
}

Answer 4

你的代码应该很好

for(var i=0;i<Result.length;i++){
  var tr =  $('<tr>').appendTo('#resultstable');
  for(var j=0;j<tableID.length;j++){
    $('<td>' + Result[i][tableID[j]] + '</td>').appendTo(tr );
  }
}

使用JSON和Javascript时，表未正确显示在行上

4 个答案: