如何在jQuery的append方法中正确嵌入$.each循环？

嘿，我明白你遇到的问题了——你想把循环生成的表格行直接塞进append的字符串里，但当前写法行不通，核心原因是**$.each并不会返回你在循环里return的那些HTML字符串**，它返回的是你遍历的原数组/对象，所以最后拼出来的内容肯定不对。

下面给你两种靠谱的实现方式：

方法1：先累加字符串，再插入 #

这是最直观的方式：先初始化一个空字符串，在$.each循环里把每一行的HTML拼进去，最后把完整的行字符串放到表格的tbody里。

// 初始化空字符串存储所有表格行
let paymentRows = '';

// 遍历payments，拼接每一行的HTML
$.each(response.payments, function(key, value) {
  // 注意要包裹<tr>标签，不然表格结构会乱
  paymentRows += `<tr>
    <td>${value.payment_date}</td>
    <td>${value.payment_value}</td>
    <td>${value.created_by}</td>
  </tr>`;
});

// 把完整的表格插入到目标元素中
$('#payment_detail').append(`
  <table class="table table-bordered table-striped">
    <thead>
      <th>Payment Date</th>
      <th>Payment Value</th>
      <th>Verified By</th>
    </thead>
    <tbody>
      ${paymentRows}
    </tbody>
  </table>
`);

方法2：用$.map生成数组后转字符串（更简洁） #

如果你喜欢更紧凑的写法，可以用$.map——它会遍历数组并返回一个新数组，每个元素就是你处理后的表格行字符串，最后用join('')把数组转成连续的HTML字符串。

// 用map生成所有行的数组，再转成字符串
const paymentRows = $.map(response.payments, function(value) {
  return `<tr>
    <td>${value.payment_date}</td>
    <td>${value.payment_value}</td>
    <td>${value.created_by}</td>
  </tr>`;
}).join('');

// 插入完整表格
$('#payment_detail').append(`
  <table class="table table-bordered table-striped">
    <thead>
      <th>Payment Date</th>
      <th>Payment Value</th>
      <th>Verified By</th>
    </thead>
    <tbody>
      ${paymentRows}
    </tbody>
  </table>
`);

为什么原来的写法不行？ #

再给你补个小知识点：$.each的作用是遍历执行回调，它的返回值是你传入的原始集合（也就是response.payments），而不是回调里return的内容。所以你直接把$.each(...)放到append的字符串里，相当于把数组/对象直接转成了字符串（比如会变成[object Object]之类的内容），自然不是你想要的表格行啦。

另外，我用了ES6的模板字符串（就是用``包裹的字符串），比用+拼接多行HTML要清爽太多，还不容易写错引号，推荐你用这种写法～

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