html表格中像excel数据筛选
时间: 2023-07-24 11:21:11 浏览: 59
在 HTML 表格中实现类似 Excel 中的数据筛选功能,可以使用 JavaScript 来实现。以下是一个简单的实现方法:
1. 给表格添加一个下拉菜单,用于选择需要筛选的列。
2. 给表格中需要筛选的列添加 class 名称,方便在 JavaScript 中选择。
3. 监听下拉菜单的 onchange 事件,根据选择的列名,筛选出需要显示的行,并隐藏其他行。
示例代码如下:
HTML:
```html
<select id="filter-select">
<option value="">选择需要筛选的列</option>
<option value="name">姓名</option>
<option value="age">年龄</option>
<option value="gender">性别</option>
</select>
<table>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name">张三</td>
<td class="age">25</td>
<td class="gender">男</td>
</tr>
<tr>
<td class="name">李四</td>
<td class="age">30</td>
<td class="gender">女</td>
</tr>
<tr>
<td class="name">王五</td>
<td class="age">20</td>
<td class="gender">男</td>
</tr>
</tbody>
</table>
```
JavaScript:
```javascript
const filterSelect = document.getElementById('filter-select');
const rows = document.getElementsByTagName('tr');
filterSelect.addEventListener('change', () => {
const selectedColumn = filterSelect.value;
if (!selectedColumn) {
// 如果没有选择任何列,则显示所有行
for (let i = 0; i < rows.length; i++) {
rows[i].style.display = '';
}
return;
}
// 隐藏所有行
for (let i = 0; i < rows.length; i++) {
rows[i].style.display = 'none';
}
// 显示符合条件的行
const filteredRows = document.querySelectorAll(`.${selectedColumn}`);
for (let i = 0; i < filteredRows.length; i++) {
filteredRows[i].parentNode.style.display = '';
}
});
```
当用户选择需要筛选的列时,JavaScript 会根据选择的列名,筛选出需要显示的行,并隐藏其他行。如果没有选择任何列,则显示所有行。