下拉筛选HTML表格无匹配结果时添加‘无结果’提示的问题

你原来的代码问题在于：那段检查隐藏行的逻辑仅在页面加载时执行一次，且el.answer是不存在的属性，行元素没有这个值，导致判断完全失效。要实现需求，需要在每次筛选后动态检查可见行数，并控制提示元素的显示。

修改步骤 #

1. 添加无结果提示元素：在表格的<tbody>末尾新增一行，用于显示无结果提示，默认隐藏。
2. 更新筛选逻辑：在refresh函数中统计可见行数，根据数量切换提示的显示状态。
3. 移除无效代码：删除你添加的那段无意义的hiddenrows检查代码。

完整代码示例 #

HTML #

<select class="filter" data-field="Status">
  <option value="">None</option>
  <option value="OK">OK</option>
  <option value="NO">NO</option>
</select>
<select class="filter" data-field="Cough">
  <option value="">None</option>
  <option value="No">No</option>
  <option value="Yes">Yes</option>
</select>
<select class="filter" data-field="Fever">
  <option value="">None</option>
  <option value="No">No</option>
  <option value="Yes">Yes</option>
</select>
<hr />
<table class="filter-table">
  <thead>
    <tr><th>Status</th><th>Cough</th><th>Fever</th></tr>
  </thead>
  <tbody>
    <tr><td>OK</td><td>No</td><td>Yes</td></tr>
    <tr><td>NO</td><td>Yes</td><td>Yes</td></tr>
    <tr><td>OK</td><td>No</td><td>No</td></tr>
    <tr><td>NO</td><td>Yes</td><td>No</td></tr>
    <!-- 新增无结果提示行 -->
    <tr class="no-results-row hidden-row">
      <td colspan="3">此查询无结果</td>
    </tr>
  </tbody>
</table>

CSS #

.filter-table {
  border-collapse: collapse;
  border: thin solid grey;
}

.filter-table thead {
  border-bottom: thin solid grey;
}

.filter-table th, .filter-table td {
  padding: 0.25em 0.5em;
}

.filter-table th {
  background: #CCC;
}

.filter-table tbody tr:nth-child(even) {
  background: #EEE;
}

.hidden-row {
  display: none;
}

/* 给无结果提示行加样式，区分普通行 */
.no-results-row td {
  text-align: center;
  background: #f8f8f8;
  color: #666;
}

JavaScript #

const
  table = document.querySelector('.filter-table'),
  filterState = {};

const dataFromRow = (row, headers) =>
  Object.fromEntries([...row.querySelectorAll('td')]
    .map((td, index) => [headers[index], td.textContent]));

const matchesCriteria = (rowData, filters) =>
  filters.every(([key, value]) => rowData[key] === value);

const refresh = () => {
  const
    headers = [...table.querySelectorAll('thead th')].map(th => th.textContent),
    filters = Object.entries(filterState),
    showAll = filters.length === 0;
  let visibleRows = 0;
  // 遍历所有数据行（排除提示行）
  table.querySelectorAll('tbody tr:not(.no-results-row)').forEach(row => {
    const show = showAll || matchesCriteria(dataFromRow(row, headers), filters);
    row.classList.toggle('hidden-row', !show);
    if (show) visibleRows++;
  });
  // 控制无结果提示的显示：如果没有可见行，就显示提示
  const noResultsRow = table.querySelector('.no-results-row');
  noResultsRow.classList.toggle('hidden-row', visibleRows > 0);
};

const handleFilterChange = (e) => {
  const
    field = e.target.dataset.field,
    value = e.target.value;
  if (value) { filterState[field] = value; }
  else { delete filterState[field]; }
  refresh();
};

document.querySelectorAll('.filter').forEach(filter =>
  filter.addEventListener('change', handleFilterChange));

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