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('change', function(event) {
for (let i = 0; i < rows.length; i++) {
const row = rows[i];
const display = this.value === 'All' || row.classList.contains(this.value);
row.style.display = display ? '' : 'none';
}
});

上面這段代碼先通過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('input', function() {
const filterValue = this.value.toLowerCase();
const filteredRows = rowsArray.filter((row) => {
return row.textContent.toLowerCase().includes(filterValue);
});
rows.forEach((row) => {
row.style.display = filteredRows.includes(row) ? '' : 'none';
});
});

用戶可以通過一個輸入框輸入文本進行篩選表格，該代碼需要先對表格數據進行處理，將其轉化為數組。對文本框進行監聽，然后采用includes()函數和filter()方法對數據進行篩選并渲染。

3. 復雜篩選

const filterTable = (table, index, value) => {
const tbodies = table.tBodies;
for (let i = 0, len = tbodies.length; i < len; i++) {
const tbody = tbodies[i];
for (let 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='';
} else {
row.style.display='none';
}
}
}
}
const table = document.querySelector('table');
const select = document.querySelector('select.filter');
const input = document.querySelector('input[type="search"]');
select.addEventListener('change', function(){
const index=this.dataset.column;
const value=this.value;
filterTable(table,index,value);
});
input.addEventListener('input', function() {
const index=this.dataset.column;
const value=this.value.toLowerCase();
filterTable(table,index,value);
});

上面這段代碼實現了多條件搜索，對于一些復雜的搜索，我們需要使用一個篩選器函數將條件傳遞給篩選器函數，然后將每個元素與該條件進行比較。

總之，JavaScript表格篩選是一項非常重要的技能，這些技巧和方法能夠讓你快速完成一些表格數據篩選和處理操作，幫助你處理數據，提高你的工作效率。