当前位置：首页 > news >正文

html+js实现表格本地筛选

news 2025/9/10 8:55:45

以下是基于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>

实现功能说明：