Each column filter, filters its own column, but when trying to filter another column, previous column filters are not remembered.
For example, in the given table: If I search "Basketball" as the sport, then want to narrow my results and search for a specific team in the "Team" column, my results from the "Sport" column are no longer included because the table has reset.
I want to make this usable regardless of the input fields and corresponding columns. So I could use it on multiple tables if need be. That is why I used:
// if data-label matches input name - run
if(cells[j].getAttribute('data-label').match(inputName)){
// do stuff
}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Filter Table by Column</title>
<link rel="stylesheet" href="css/style.css
">
</head>
<body>
<table>
<thead>
<tr>
<td><input type="text" name="Player" placeholder="Player... "></td>
<td><input type="text" name="Sport" placeholder="Sport..."></td>
<td><input type="text" name="Team" placeholder="Team..."></td>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Player">Michael Jordan</td>
<td data-label="Sport">Basketball</td>
<td data-label="Team">Chicago Bulls</td>
</tr>
<tr>
<td data-label="Player">Kobe Bryant</td>
<td data-label="Sport">Basketball</td>
<td data-label="Team">LA Lakers</td>
</tr>
<tr>
<td data-label="Player">Brett Favre</td>
<td data-label="Sport">Football</td>
<td data-label="Team">Greenbay Packers</td>
</tr>
<tr>
<td data-label="Player">Babe Ruth</td>
<td data-label="Sport">Baseball</td>
<td data-label="Team">New York Yankees</td>
</tr>
<tr>
<td data-label="Player">Tom Brady</td>
<td data-label="Sport">Football</td>
<td data-label="Team">New England Patriots</td>
</tr>
<tr>
<td data-label="Player">LeBron James</td>
<td data-label="Sport">Basketball</td>
<td data-label="Team">LA Lakers</td>
</tr>
<tr>
<td data-label="Player">Steph Curry</td>
<td data-label="Sport">Basketball</td>
<td data-label="Team">Golden State Warriors</td>
</tr>
<tr>
<td data-label="Player">Jose Berrios</td>
<td data-label="Sport">Baseball</td>
<td data-label="Team">Minnesota Twins</td>
</tr>
<tr>
<td data-label="Player">Kirby Pucket</td>
<td data-label="Sport">Baseball</td>
<td data-label="Team">Minnesota Twins</td>
</tr>
<tr>
<td data-label="Player">Zach Parise</td>
<td data-label="Sport">Hockey</td>
<td data-label="Team">Minnesota Wild</td>
</tr>
<tr>
<td data-label="Player">Jason Zucker</td>
<td data-label="Sport">Hockey</td>
<td data-label="Team">Minnesota Wild</td>
</tr>
</tbody>
</table>
<script src="js/main.js"></script>
</body>
</html>
main.js
// Listen to all clicks on the document
document.addEventListener('keyup', function(e){
// if event doesn't match
if(!e.target.matches('input[type="text"]')) return;
// otherwise run
filterTable(e);
}, false);
// filter results
function filterTable(e){
let inputName = e.target.name;
let filter = e.target.value.toUpperCase();
let rows = document.querySelector('table tbody').rows;
// get each row
for(let i = 0; i < rows.length; i++){
// loop through each cell
let cells = rows[i].cells;
for(j = 0; j < cells.length; j++){
let rowContent = cells[j].textContent;
// if data-label matches input name - run
if(cells[j].getAttribute('data-label').match(inputName)){
// if rowContent inlcudes input - run
if(rowContent.toUpperCase().includes(filter)){
// show row
rows[i].style.display = "";
} else {
// hide row
rows[i].style.display = "none";
}
}
}
}
}
style.css
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
height: 100%;
line-height: 1.5;
}
input {
padding: 8px;
border: 0;
border-bottom: 1px solid #ccc;
width: 100%;
}
input:focus {
outline: none;
}
table {
border-collapse: collapse;
width: 100%;
margin-top: 20px;
padding: 8px;
}
table td {
padding: 8px;
}
table tbody tr:hover {
background: #999;
}
