可以在页面上使用 JavaScript 实现表格过滤功能。示例代码如下:
// 过滤后的 Row 将会被显示在 table 中
let filterRows = (table, query) => {
// 从 table 中获取每一个 row
let rows = table.querySelectorAll('tr');
// 遍历每一个 row
for (let row of rows) {
let hasMatch = false;
// 从 row 中获取每一个 cell
let cells = row.querySelectorAll('td');
// 遍历每一个 cell
for (let cell of cells) {
let text = cell.textContent;
if (text.includes(query)) {
// 找到匹配
hasMatch = true;
break;
}
}
// 显示或者隐藏 row
if (hasMatch) {
row.style.display = '';
} else {
row.style.display = 'none';
}
}
}
调用的方式:
let table = document.querySelector('#my-table');
let query = window.prompt('请输入要过滤的字符串');
filterRows(table, query);
除了上面的过滤方式,还可以使用 DOM 或者第三方库来实现表格过滤功能。
没有回复内容