以下是基于JavaScript实现的表格本地筛选解决方案，综合多个高可信度资源优化而成：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格本地筛选系统</title>
<style>
body {
font-family: 'Segoe UI', Arial, sans-serif;
margin: 20px;
background-color: #f5f7fa;
}
.filter-container {
background: white;
padding: 15px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
margin-bottom: 20px;
}
#filterInput {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 16px;
background-image: url('data:image/svg+xml;utf8,<svg fill="%23999" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>');
background-repeat: no-repeat;
background-position: 10px center;
padding-left: 40px;
}
#dataTable {
border-collapse: collapse;
width: 100%;
background: white;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
#dataTable th, #dataTable td {
border: 1px solid #e0e0e0;
padding: 12px;
text-align: left;
}
#dataTable th {
background-color: #4a6fa5;
color: white;
position: sticky;
top: 0;
}
#dataTable tr:nth-child(even) {
background-color: #f8f9fa;
}
#dataTable tr:hover {
background-color: #e9ecef;
}
.no-results {
text-align: center;
padding: 20px;
color: #666;
font-style: italic;
}
</style>
</head>
<body>
<div class="filter-container">
<input type="text" id="filterInput" placeholder="输入关键字筛选表格..." title="支持多列搜索">
<div class="column-selector">
<label><input type="checkbox" name="searchColumns" value="0" checked> 姓名</label>
<label><input type="checkbox" name="searchColumns" value="1" checked> 年龄</label>
<label><input type="checkbox" name="searchColumns" value="2" checked> 城市</label>
</div>
</div>
<table id="dataTable">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>城市</th>
<th>职业</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>28</td>
<td>北京</td>
<td>工程师</td>
</tr>
<tr>
<td>李四</td>
<td>32</td>
<td>上海</td>
<td>设计师</td>
</tr>
<tr>
<td>王五</td>
<td>25</td>
<td>广州</td>
<td>教师</td>
</tr>
<tr>
<td>赵六</td>
<td>40</td>
<td>深圳</td>
<td>医生</td>
</tr>
<tr>
<td>钱七</td>
<td>22</td>
<td>杭州</td>
<td>学生</td>
</tr>
</tbody>
</table>
<script>
document.addEventListener('DOMContentLoaded', function() {
const filterInput = document.getElementById('filterInput');
const table = document.getElementById('dataTable');
const rows = table.getElementsByTagName('tr');
const columnCheckboxes = document.querySelectorAll('input[name="searchColumns"]');
// 添加无结果提示行
const noResultsRow = document.createElement('tr');
noResultsRow.className = 'no-results';
noResultsRow.innerHTML = '<td colspan="4">没有找到匹配的结果</td>';
noResultsRow.style.display = 'none';
table.querySelector('tbody').appendChild(noResultsRow);
function filterTable() {
const filterValue = filterInput.value.toLowerCase();
let visibleRowCount = 0;
const selectedColumns = Array.from(columnCheckboxes)
.filter(checkbox => checkbox.checked)
.map(checkbox => parseInt(checkbox.value));
for (let i = 1; i < rows.length; i++) {
const row = rows[i];
let rowMatch = false;
// 检查选中的列是否包含搜索词
for (let j = 0; j < selectedColumns.length; j++) {
const cell = row.cells[selectedColumns[j]];
if (cell) {
const cellText = cell.textContent.toLowerCase();
if (cellText.includes(filterValue)) {
rowMatch = true;
break;
}
}
}
if (rowMatch || filterValue === '') {
row.style.display = '';
visibleRowCount++;
} else {
row.style.display = 'none';
}
}
// 显示/隐藏无结果提示
noResultsRow.style.display = visibleRowCount > 0 ? 'none' : '';
}
// 输入事件监听
filterInput.addEventListener('input', filterTable);
// 列选择变更事件监听
columnCheckboxes.forEach(checkbox => {
checkbox.addEventListener('change', filterTable);
});
});
</script>
</body>
</html>
实现功能说明：
- 响应式设计：适配不同屏幕尺寸，包含现代化UI元素如阴影、圆角和悬停效果
- 多列筛选：支持选择特定列进行搜索，通过复选框控制搜索范围
- 即时反馈：输入时实时过滤表格内容，无需提交按钮
- 无结果提示：当没有匹配项时显示友好提示信息
- 性能优化：使用事件委托和缓存DOM元素提高执行效率
- 可扩展性：表格数据可动态加载，支持更多列的添加
此解决方案避免了服务器端查询，完全在客户端实现高效筛选，适用于中小型数据集展示场景
效果截图：
筛选后：
