如何在HTML和Bootstrap表格中展示无匹配结果提示

数据老陈

2026-8-21

实现Bootstrap表格无搜索匹配时的提示功能

以下是直接可用的实现方案，基于你已有的搜索筛选逻辑改造：

1. 调整HTML结构

在表格的<tbody>里添加一个用于显示提示的行，初始设置为隐藏：

<table class="table table-striped">
  <thead>
    <tr>
      <th>姓名</th>
      <th>邮箱</th>
      <th>职位</th>
    </tr>
  </thead>
  <tbody id="table-body">
    <!-- 原有数据行 -->
    <tr>
      <td>张三</td>
      <td>zhangsan@example.com</td>
      <td>前端开发</td>
    </tr>
    <!-- 无匹配提示行 -->
    <tr id="no-record" class="d-none text-center text-muted">
      <td colspan="3">未找到任何匹配记录</td>
    </tr>
  </tbody>
</table>

用Bootstrap的d-none类默认隐藏提示行
colspan的值要和表格的列数一致，确保提示内容跨列居中显示

2. 修改搜索筛选的JS逻辑

在你现有筛选代码的末尾，加入统计可见行并控制提示显示的逻辑：

// 假设你的搜索输入框ID是search-input
document.getElementById('search-input').addEventListener('input', function() {
  const searchTerm = this.value.toLowerCase();
  const rows = document.querySelectorAll('#table-body tr:not(#no-record)');
  let visibleCount = 0;

  rows.forEach(row => {
    const text = row.textContent.toLowerCase();
    if (text.includes(searchTerm)) {
      row.classList.remove('d-none');
      visibleCount++;
    } else {
      row.classList.add('d-none');
    }
  });

  // 根据可见行数控制提示显示
  const noRecordRow = document.getElementById('no-record');
  if (visibleCount === 0) {
    noRecordRow.classList.remove('d-none');
  } else {
    noRecordRow.classList.add('d-none');
  }
});