<section class="container">
<h2>Light Javascript Table Filter</h2>
<input type="search" class="light-table-filter" data-table="order-table" placeholder="Filter">
<table class="order-table table">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>john.doe@gmail.com</td>
<td>0123456789</td>
<td>99</td>
</tr>
<tr>
<td>Jane Vanda</td>
<td>jane@vanda.org</td>
<td>9876543210</td>
<td>349</td>
</tr>
<tr>
<td>Alferd Penyworth</td>
<td>alfred@batman.com</td>
<td>6754328901</td>
<td>199</td>
</tr>
</tbody>
</table>
</section>
((document) => {
"use strict";
const LightTableFilter = (({ forEach }) => {
let _input;
function _onInputEvent({ target }) {
_input = target;
const tables = document.getElementsByClassName(
_input.getAttribute("data-table")
);
forEach.call(tables, ({ tBodies }) => {
forEach.call(tBodies, ({ rows }) => {
forEach.call(rows, _filter);
});
});
}
function _filter({ textContent, style }) {
const text = textContent.toLowerCase();
const val = _input.value.toLowerCase();
style.display = !text.includes(val) ? "none" : "table-row";
}
return {
init() {
const inputs = document.getElementsByClassName(
"light-table-filter"
);
forEach.call(inputs, (input) => {
input.oninput = _onInputEvent;
});
}
};
})(Array.prototype);
document.addEventListener("readystatechange", () => {
if (document.readyState === "complete") {
LightTableFilter.init();
}
});
})(document);
This Pen doesn't use any external JavaScript resources.