如何用jQuery填充HTML表格？附基础表格及填充代码片段

先帮你梳理下现有代码里的核心问题：

• 选择器写错了：你用的tbody#test不符合你的DOM结构，你的表格id是test，<tbody>并没有设置id，正确的选择器应该是$('#test tbody')（选中id为test的表格下的tbody）。
• 行创建逻辑有误：你每次循环都新建一个<tr>，会导致每个数据单元格单独占一行，而不是一个<tr>包含对应表头的三个<td>。

下面是修正后的完整实现：

保留你原有的HTML结构： #

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

修正后的jQuery填充代码： #

$.get('/currency', function(dreams) {
  // 先清空tbody，避免重复调用接口时数据重复累加
  $('#test tbody').empty();
  
  dreams.forEach(function(dream) {
    // 创建完整的一行，包含三个对应表头的单元格
    const tableRow = $('<tr>')
      .append($('<td>').text(dream.id))  // 对应ID列，这里假设返回的dream对象有id属性
      .append($('<td>').text(dream.sender))  // 对应Sender列，假设dream有sender属性
      .append($('<td>').text(dream.received));  // 对应Received列，假设dream有received属性
    
    // 将组装好的行添加到tbody中
    tableRow.appendTo('#test tbody');
  });
});

额外补充说明： #

• 如果你的接口返回的dream对象字段不是id/sender/received（比如你代码里提到的jpy），只需要把对应位置的dream.id替换成实际字段名即可，注意要和表头内容对应上。
• 加入empty()方法是为了避免多次请求接口时，旧数据还留在表格里。
• 用jQuery链式调用创建行的方式，比字符串拼接更清晰，也更不容易出现语法错误。

内容的提问来源于stack exchange，提问作者user1897151