使用append动态渲染tab列表时，空列表提示重复显示如何解决

数据老陈

2026-10-2

空列表提示重复问题修复方案

问题根因

原有判断逻辑错误：$("#typeB").length是判断id=typeB的tbody元素是否存在，该元素在页面中一直存在，返回值永远为1，因此你写的空判断永远不会触发
空提示插入时机错误：空提示代码写在单条数据的判断分支中，每遇到1条不符合渲染条件的数据就会插入1次空提示，符合你所说的3+1条不符合数据就渲染4条空提示的场景

修复方案

调整渲染逻辑：每次切换tab加载数据前先清空对应容器，等所有符合条件的列表项渲染完成后，统一判断容器是否为空，再决定是否插入空提示。

修正后代码示例

// 1. 切换tab加载typeB对应数据前，先清空tbody原有内容
$("#typeB").empty();
let count = 1;
// 2. 遍历当前tab对应的所有源数据，仅渲染符合条件的项
// 下方的data请替换为你当前tab对应的接口返回列表变量
data.forEach(e => {
  if (e.isd.id == '5') {
    $("#typeB").append(`
      <tr class="tb-odr">
          <td class="">${count++}</td>
          <td class="tb-odr-amount">
              <span class="tb-odr-total">
                  <span class="amount">${e.name}</span><br>
              </span>
          </td>
          <td class="tb-odr">
              <span class="tb-odr-total">
                  <p><small>${e.description}</small></p>
              </span>
          </td>
      </tr>
    `);
  }
});
// 3. 所有项渲染完成后，统一判断是否为空，仅插入1次空提示
if ($("#typeB").children().length === 0) {
  // 注意：thead只有4个th，colspan从5改为4才能正常居中
  $('#typeB').append(`<tr><td colspan="4"><div class="alert alert-danger text-center">Nothing in the list yet !</div></td></tr>`);
}