Question

我有这个非常基本的桌面html。

 <table id="test">
    <thead>
        <tr>
            <th>ID</th>
            <th>Sender</th>
            <th>Received</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

我正在使用此代码填充表格的行

$.get('/currency', function(dreams) {
  dreams.forEach(function(dream) {
    $('<tr><td></td>').text(dream.jpy).appendTo('tbody#test')
    $('<tr><td></td>').text(dream.jpy).appendTo('tbody#test')
    $('<tr><td></td></tr>').text(dream.jpy).appendTo('tbody#test')
  })
})

我的问题是，该行未显示。

我做错了什么？

Answer 1

tr未在前2个陈述中正确关闭
$('<tr><td></td></tr>')的输出将为tr而不是td，因此您要在tr内设置文字而不是td
没有符合tbody#test选择器的元素，因为tbody没有ID test。

所以，你的解决方案是

$('<td />').text(dream.jpy).appendTo($('<tr/ >').appendTo('#test tbody'))

Answer 2

要达到预期效果，请使用以下选项

使用$（''）
根据用于设置每列中单元格值的键来获取每行的键以进行循环
使用row.append将行值附加到每个单元格（$（''+ dream [cellData] +''））;

    dreams.forEach(function(dream) {
    var row = $('<tr></tr>');
    var keys = Object.keys(dream)
            keys.forEach(function (cellData) {          
                row.append($('<td>'+dream[cellData]+'</td>'));
            });
            $('tbody').append(row);
    })

代码示例 - https://codepen.io/nagasai/pen/gzbzqK

Answer 3

感谢大家的帮助和评论。我已将其更改为类似的内容并正在使用

 dreams.forEach(function(dream) {
  $('<tr>').appendTo("#test>tbody");
  $('<td></td>').text(dream.jpy).appendTo('#test>tbody')
  $('<td></td>').text(dream.jpy).appendTo('#test>tbody')
  $('<td></td>').text(dream.jpy).appendTo('#test>tbody')
  $('</tr>').appendTo("#test>tbody");
})

jquery填充到表中

3 个答案: