解决jQuery中JSON数据重复填充对应ID HTML表格的问题

核心问题分析 #

你的代码大概率是在遍历所有JSON键名并填充表格时，没有限制仅针对当前打开的模态框内的表格，导致所有数据都被追加到了当前显示的表格中。

修正步骤与代码示例 #

1. 确保HTML结构中表格ID与JSON键名完全对应 #

每个模态框内的表格ID需和JSON数据中的键名严格一致（比如表格id="AFN1"对应JSON的"AFN1"键）。

2. 修正jQuery逻辑，实现精准匹配填充 #

通过监听模态框的show.bs.modal事件，仅对当前模态框内的表格填充对应JSON数据，且填充前清空表格避免重复：

$(document).ready(function() {
  // 假设已通过AJAX获取到JSON数据并存储在data变量中
  $('.modal').on('show.bs.modal', function() {
    // 获取当前模态框内的表格ID
    const targetTableId = $(this).find('table').attr('id');
    // 无匹配ID或对应数据时直接返回
    if (!targetTableId || !data[targetTableId]) return;

    const $tableBody = $(`#${targetTableId} tbody`);
    // 填充前清空表格内容，防止重复追加
    $tableBody.empty();

    // 遍历对应ID的JSON数据，生成表格行
    data[targetTableId].forEach(item => {
      const row = `<tr>
        <td>${item.col1}</td>
        <td>${item.col2}</td>
        <!-- 根据你的表格列数添加更多td标签 -->
      </tr>`;
      $tableBody.append(row);
    });
  });
});

关键优化点 #

• 精准匹配：通过当前模态框内的表格ID直接定位JSON中的对应数据，避免遍历所有键名
• 清空表格：填充前调用empty()清除旧内容，彻底解决重复数据问题
• 容错判断：提前检查表格ID和对应数据是否存在，避免控制台报错

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