128 lines
4.2 KiB
HTML
128 lines
4.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>React with webpack</title>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h3>
|
|
<span>JavaScript Filter Table Data</span>
|
|
<input
|
|
type="search"
|
|
placeholder="Search..."
|
|
class="form-control search-input"
|
|
data-table="customers-list"
|
|
/>
|
|
</h3>
|
|
<table class="customers-list">
|
|
<thead>
|
|
<tr>
|
|
<th>Customer ID</th>
|
|
<th>Name</th>
|
|
<th>Email</th>
|
|
<th>Postal Code</th>
|
|
<th>Country</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>1</td>
|
|
<td>Ana Trujillo</td>
|
|
<td>Ana.trujillo@gmail.com</td>
|
|
<td>050214</td>
|
|
<td>Germany</td>
|
|
</tr>
|
|
<tr>
|
|
<td>2</td>
|
|
<td>Antonio Moreno</td>
|
|
<td>antoniomoreno2@gmail.com</td>
|
|
<td>12209</td>
|
|
<td>Mexico</td>
|
|
</tr>
|
|
<tr>
|
|
<td>3</td>
|
|
<td>Maria Anders</td>
|
|
<td>mariaanders@yahoo.com</td>
|
|
<td>05021</td>
|
|
<td>Germany</td>
|
|
</tr>
|
|
<tr>
|
|
<td>4</td>
|
|
<td>Thomas Hardy</td>
|
|
<td>hardythomas.90@gmail.com</td>
|
|
<td>WA1 1DP</td>
|
|
<td>United Kingdom</td>
|
|
</tr>
|
|
<tr>
|
|
<td>5</td>
|
|
<td>Christina Berglund</td>
|
|
<td>christina@outlook.com</td>
|
|
<td>S-958 22</td>
|
|
<td>Sweden</td>
|
|
</tr>
|
|
<tr>
|
|
<td>6</td>
|
|
<td>Davolio Nancy</td>
|
|
<td>nancy.davolio@gmail.com</td>
|
|
<td>810025</td>
|
|
<td>India</td>
|
|
</tr>
|
|
<tr>
|
|
<td>7</td>
|
|
<td>Fuller Andrew</td>
|
|
<td>andrew.10@yahoo.com</td>
|
|
<td>W23 458</td>
|
|
<td>United State</td>
|
|
</tr>
|
|
<tr>
|
|
<td>8</td>
|
|
<td>Leverling Janet</td>
|
|
<td>leverling.j@gmail.com</td>
|
|
<td>T5A 0B5</td>
|
|
<td>Canada</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<script>
|
|
(function(document) {
|
|
'use strict';
|
|
|
|
var TableFilter = (function(myArray) {
|
|
var search_input;
|
|
|
|
function _onInputSearch(e) {
|
|
search_input = e.target;
|
|
var tables = document.getElementsByClassName(search_input.getAttribute('data-table'));
|
|
myArray.forEach.call(tables, function(table) {
|
|
myArray.forEach.call(table.tBodies, function(tbody) {
|
|
myArray.forEach.call(tbody.rows, function(row) {
|
|
var text_content = row.textContent.toLowerCase();
|
|
var search_val = search_input.value.toLowerCase();
|
|
row.style.display = text_content.indexOf(search_val) > -1 ? '' : 'none';
|
|
});
|
|
});
|
|
});
|
|
}
|
|
return {
|
|
init: function() {
|
|
var inputs = document.getElementsByClassName('search-input');
|
|
myArray.forEach.call(inputs, function(input) {
|
|
input.oninput = _onInputSearch;
|
|
});
|
|
}
|
|
};
|
|
})(Array.prototype);
|
|
|
|
document.addEventListener('readystatechange', function() {
|
|
if (document.readyState === 'complete') {
|
|
TableFilter.init();
|
|
}
|
|
});
|
|
})(document);
|
|
</script>
|
|
<script src="./bundle.js"></script>
|
|
</body>
|
|
</html>
|