JSFiddle - React, Tailwind, and code Playground

by Felipe Alfaro

HTML

<section class="container">

	<h2>Light Javascript Table Filter</h2>

	<input type="search" class="light-table-filter" data-table="order-table" placeholder="Filter">
  
  	<input type="search" class="light-table-filter" data-table="order-tables" 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>[email protected]</td>
				<td>0123456789</td>
				<td>99</td>
			</tr>
			<tr>
				<td>Jane Vanda</td>
				<td>[email protected]</td>
				<td>9876543210</td>
				<td>349</td>
			</tr>
			<tr>
				<td>Alferd Penyworth</td>
				<td>[email protected]</td>
				<td>6754328901</td>
				<td>199</td>
			</tr>
		</tbody>
	</table>
</section>

JavaScript

function asd(){

		var _input;
		var inputs = document.getElementsByClassName('light-table-filter');
    
		function _onInputEvent(e) {
			_input = e.target;
			var tables = document.getElementsByClassName(_input.getAttribute('data-table'));
			Array.prototype.forEach.call(tables, function(table) {
				Array.prototype.forEach.call(table.tBodies, function(tbody) {
					Array.prototype.forEach.call(tbody.rows, _filter);
				});
			});
		}

		function _filter(row) {
			var text = row.textContent.toLowerCase(), val = _input.value.toLowerCase();
			row.style.display = text.indexOf(val) === -1 ? 'none' : 'table-row';
		}
    Array.prototype.forEach.call(inputs, function(input) {
      input.oninput = _onInputEvent;
    });
}



	document.addEventListener('readystatechange', function() {
		if (document.readyState === 'complete') {
			asd();
		}
	});