如何用jQuery在表格中正确追加指定数据？AJAX追加异常排查

问题根源 #

当前代码的核心问题是异步请求的时序导致DOM定位错误：

• 首次AJAX请求获取到Preliminaries和Professional Services两个父项，循环中依次创建对应的<tbody>并插入表格
• 遍历每个父项的子任务ID时，发起的第二次AJAX请求是异步执行的，当子请求返回结果时，父项的循环已经完成，所有父项的<tbody>都已插入页面
• 此时使用$('#tableForContent tbody').last()会始终指向最后一个<tbody>（即Professional Services对应的容器），导致所有子项都被错误追加到这里

修复代码 #

通过缓存当前父项对应的<tbody>对象，避免依赖动态变化的DOM结构定位，确保子项追加到正确的父容器中：

$.ajax({
  url: '/Pmms/GetPhases',
  data: {
    projectId: '@Model.Data.Id'
  },
  type: 'GET',
  dataType: 'json',
  success: function(data) {
    $.each(data.data, function(index, value) {
      console.log(value);
      // 创建当前父项的tbody并转为jQuery对象缓存
      var $currentTbody = $(`
        <tbody>
          <tr class="phase bg-secondary" data-id="${value.projectTaskId}">
              <td colspan="7">
                  ${value.tasks}
              </td>
          </tr>
        </tbody>
      `);
      // 将缓存的tbody插入表格
      $('#tableForContent').append($currentTbody);
      
      $.each((value.projectSubTaskCollection).split(','), function(index, val) {
        $.ajax({
          url: '/Pmms/GetActivityName',
          data: {
            actId: val
          },
          type: 'GET',
          dataType: 'json',
          success: function(datas) {
            var workItem = `
              <tr class="activity bg-danger" data-id="${datas.list.dataKey}">
                  <td colspan="6" class="pl-3">
                      &nbsp;${datas.list.dataValue}
                  </td>
                  <td>
                      <button class="btnToAdd">
                          add
                      </button>
                  </td>
              </tr>
            `;
            // 直接使用缓存的tbody追加子项，确保对应正确的父容器
            $currentTbody.append(workItem);
          },
          error: function(error) {
            console.error('获取子任务名称失败:', error);
          }
        });
      });
    });
  },
  error: function(error) {
    console.error('获取父项数据失败:', error);
  }
});

修复说明 #

1. 不再拼接HTML字符串后直接插入DOM，而是先转为jQuery对象$currentTbody并缓存，确保后续异步回调能精准定位到当前父项的容器
2. 子AJAX请求的成功回调中，直接对缓存的$currentTbody执行追加操作，彻底避免了异步时序导致的DOM定位错误
3. 补充了错误日志输出，方便排查请求异常情况

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