Filter all Html Table:
const myFunction = () => {
const trs = document.querySelectorAll('#myTable tr:not(.header)')
const filter = document.querySelector('#myInput').value
const regex = new RegExp(filter, 'i')
const isFoundInTds = td => regex.test(td.innerHTML)
const isFound = childrenArr => childrenArr.some(isFoundInTds)
const setTrStyleDisplay = ({ style, children }) => {
style.display = isFound([
...children // <-- All columns
]) ? '' : 'none'
}
trs.forEach(setTrStyleDisplay)
}
input#myInput { width: 220px; }
table#myTable { width: 100%; }
table#myTable th { text-align: left; padding: 20px 0 10px; }
<input
type="text"
id="myInput"
onkeyup="myFunction()"
placeholder="Search for names or countries.."
title="Type in a name or a country">
<table id="myTable">
<tr class="header">
<th style="width:60%;">Name</th>
<th style="width:40%;">Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Germany</td>
</tr>
<tr>
<td>Berglunds snabbkop</td>
<td>Sweden</td>
</tr>
<tr>
<td>Island Trading</td>
<td>UK</td>
</tr>
<tr>
<td>Koniglich Essen</td>
<td>Germany</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Italy</td>
</tr>
<tr>
<td>North/South</td>
<td>UK</td>
</tr>
<tr>
<td>Paris specialites</td>
<td>France</td>
</tr>
</table>
Filter only specific Html Table Columns
- Countries, in this case it is the column with index 1
const myFunction = () => {
const columns = [
{ name: 'Name', index: 0, isFilter: false },
{ name: 'Country', index: 1, isFilter: true }
]
const filterColumns = columns.filter(c => c.isFilter).map(c => c.index)
const trs = document.querySelectorAll(`#myTable tr:not(.header)`)
const filter = document.querySelector('#myInput').value
const regex = new RegExp(escape(filter), 'i')
const isFoundInTds = td => regex.test(td.innerHTML)
const isFound = childrenArr => childrenArr.some(isFoundInTds)
const setTrStyleDisplay = ({ style, children }) => {
style.display = isFound([
...filterColumns.map(c => children[c]) // <-- filter Columns
]) ? '' : 'none'
}
trs.forEach(setTrStyleDisplay)
}
input#myInput { width: 220px; }
table#myTable { width: 100%; }
table#myTable th { text-align: left; padding: 20px 0 10px; }
<input
type="text"
id="myInput"
onkeyup="myFunction()"
placeholder="Search for names or countries.."
title="Type in a name or a country">
<table id="myTable">
<tr class="header">
<th style="width:60%;">Name</th>
<th style="width:40%;">Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Germany</td>
</tr>
<tr>
<td>Berglunds snabbkop</td>
<td>Sweden</td>
</tr>
<tr>
<td>Island Trading</td>
<td>UK</td>
</tr>
<tr>
<td>Koniglich Essen</td>
<td>Germany</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Italy</td>
</tr>
<tr>
<td>North/South</td>
<td>UK</td>
</tr>
<tr>
<td>Paris specialites</td>
<td>France</td>
</tr>
</table>