首页 - 设备 - javascript表格过滤

javascript表格过滤

2023-10-06 15:38

Javascript表格过滤是数据处理中非常重要的一部分。无论您是通过搜索结果查找特定记录还是需要对数据进行汇总,过滤表都可以帮助您快速找到符合您要求的数据。让我们探讨一些 JavaScript 表过滤的示例,以更好地理解这个主题。

1。基本过滤

const table = document.querySelector('table');
const tbody = table.querySelector('tbody');
const select = document.querySelector('select');
const rows = tbody.querySelectorAll('tr');
select.addEventListener('更改', 函数(事件) {
for (让 i = 0; i < rows.length; i++) {
常量行=行[i];
const display = this.value === '全部' || row.classList.contains(this.value);
行.样式.显示=显示? '' : '没有任何';
}
});

上面的代码首先通过DOM方法获取选中的元素和表格数据,然后根据用户选择的选项过滤数据。过滤完成后,渲染符合条件的数据。

2。文字输入搜索

const table = document.querySelector('table');
const tbody = table.querySelector('tbody');
const input = document.querySelector('input');
const rows = tbody.querySelectorAll('tr');
const rowsArray = Array.from(rows);
input.addEventListener('输入', function() {const filterValue = this.value.toLowerCase();
const FilteredRows = rowsArray.filter((row) => {
返回 row.textContent.toLowerCase().includes(filterValue);
});
rows.forEach((行) => {
row.style.display=filteredRows.includes(row)? '' : '没有任何';
});
});

用户可以通过输入框输入文本来过滤表格。这段代码需要先处理表数据,并将其转换为数组。监视文本框,然后使用includes()函数和filter()方法来过滤和渲染数据。

3。复杂过滤

const filterTable = (表, 索引, 值) => {
const tbodies = table.tBodies;
for (让 i = 0, len = tbodies.length; i < len; i++) {
const tbody = tbodies[i];
for (让 j = 0, rowsLen = tbody.rows.length; j < rowsLen; j++) {
const row = tbody.rows[j];
const cells = row.cells;
if (cells.length>index && (value === 'all' || cells[index].innerHTML.toLowerCase() === value)) {
row.style.display='';
} 别的 {
row.style.display='无';
}
}
}
}
const table = document.querySelector('table');
const select = document.querySelector('select.filter');const input = document.querySelector('input[type="search"]');
select.addEventListener('更改', function(){
const索引=this.dataset.column;
const 值=this.value;
filterTable(表、索引、值);
});
input.addEventListener('输入', function() {
const索引=this.dataset.column;
const value=this.value.toLowerCase();
filterTable(表、索引、值);
});

上面的代码实现了多条件搜索。对于一些复杂的搜索,我们需要使用过滤函数将条件传递给过滤函数,然后将每个元素与条件进行比较。

总之,JavaScript表格过滤是一项非常重要的技能。这些技巧和方法可以让您快速完成一些表数据过滤和处理操作,帮助您处理数据,提高工作效率。