如何选中HTML表格th列并动态填充关联的一对多AJAX数据

你原有代码存在两个核心问题：一是异步AJAX回调中无法匹配当前th对应的列索引，二是没有处理表格行的新增逻辑，容易出现填充错乱。以下是两种可用的实现方案：

方案1：适配现有请求逻辑（每个th单独拉取数据） #

提前记录每个th的id与列索引的映射关系，避免异步回调上下文丢失，按列填充对应数据：

// 存储th_id与对应列索引的映射
const thMap = new Map();
$("#ths th").each(function (colIndex) {
  const thId = $(this).children().data('th_id');
  thMap.set(thId, colIndex);
  
  $.ajax({
    type: "POST",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    url: "/api/load_tds",
    data: JSON.stringify({
      "th_id": thId
    }),
    success: function (res) {
      const targetCol = thMap.get(thId);
      // 遍历当前列的每一行数据
      $.each(res, function (rowIndex, cellValue) {
        // 第0行是表头，数据行从下标1开始
        let $targetTr = $(`#table tr:eq(${rowIndex + 1})`);
        // 行不存在则新建，提前补全所有空td保证列对齐
        if ($targetTr.length === 0) {
          $targetTr = $('<tr></tr>');
          const thCount = $("#ths th").length;
          for(let i = 0; i < thCount; i++){
            $targetTr.append('<td><div></div></td>');
          }
          $('#table').append($targetTr);
        }
        // 填充对应列的单元格
        $targetTr.find(`td:eq(${targetCol}) div`).text(cellValue);
        // 若需要渲染HTML内容，将text()改为html()即可
      });
    }
  });
});

方案2：优化请求并发（推荐） #

如果th数量较多，逐个发请求会导致并发过高，建议合并为单次请求拉取所有列数据，性能更好：

const thIdList = [];
const thMap = new Map();
// 一次性收集所有th的id与列索引映射
$("#ths th").each(function (colIndex) {
  const thId = $(this).children().data('th_id');
  thIdList.push(thId);
  thMap.set(thId, colIndex);
});

// 单次请求拉取所有列数据
// 后端接口返回格式示例：{ "1": ["行1值","行2值"], "2": ["行1值","行2值"...] }，key为th_id
$.ajax({
  type: "POST",
  contentType: "application/json; charset=utf-8",
  dataType: "json",
  url: "/api/load_all_tds",
  data: JSON.stringify({
    "th_ids": thIdList
  }),
  success: function (allColumnData) {
    Object.keys(allColumnData).forEach(thId => {
      const targetCol = thMap.get(Number(thId));
      const colData = allColumnData[thId];
      // 后续填充逻辑和方案1一致
      $.each(colData, function (rowIndex, cellValue) {
        let $targetTr = $(`#table tr:eq(${rowIndex + 1})`);
        if ($targetTr.length === 0) {
          $targetTr = $('<tr></tr>');
          for(let i = 0; i < thIdList.length; i++){
            $targetTr.append('<td><div></div></td>');
          }
          $('#table').append($targetTr);
        }
        $targetTr.find(`td:eq(${targetCol}) div`).text(cellValue);
      });
    })
  }
});

内容的提问来源于stack exchange，提问作者User-2