henideepak/JS Table Filter

## JS Table Filter
<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>JS table filter</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
</head>
<body>
    <input type="search" placeholder="Search Codes" class="form-control search-input" data-table="customers-list">
    <table class="table customers-list">
        <thead>
            <tr>
                <th>Code</th>
                <th>Title</th>
            </tr>
        </thead>
        <tbody>

            <tr>
                <td>1001</td>
                <td>Travel Agencies, Tour Operators</td>
            </tr>

            <tr>
                <td>1002</td>
                <td>Telecommunication Equipment and Telephone Sales</td>
            </tr>

            <tr>
                <td>1003</td>
                <td>KEY-ENTERED TELECOM MERCHANT</td>
            </tr>

            <tr>
                <td>1004</td>
                <td>Telecommunications Services</td>
            </tr>

            <tr>
                <td>1005</td>
                <td>Computer Network Services</td>
            </tr>

            <tr>
                <td>1006</td>
                <td>Drugs, Drug Proprietaries, and Druggist Sundries</td>
            </tr>

        </tbody>
    </table>
</body>
</html>
<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>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset='utf-8'>
	<meta http-equiv='X-UA-Compatible' content='IE=edge'>
	<title>JS table filter</title>
	<meta name='viewport' content='width=device-width, initial-scale=1'>
	</head>
	<body>
	<input type="search" placeholder="Search Codes" class="form-control search-input" data-table="customers-list">
	<table class="table customers-list">
	<thead>
	<tr>
	<th>Code</th>
	<th>Title</th>
	</tr>
	</thead>
	<tbody>

	<tr>
	<td>1001</td>
	<td>Travel Agencies, Tour Operators</td>
	</tr>

	<tr>
	<td>1002</td>
	<td>Telecommunication Equipment and Telephone Sales</td>
	</tr>

	<tr>
	<td>1003</td>
	<td>KEY-ENTERED TELECOM MERCHANT</td>
	</tr>

	<tr>
	<td>1004</td>
	<td>Telecommunications Services</td>
	</tr>

	<tr>
	<td>1005</td>
	<td>Computer Network Services</td>
	</tr>

	<tr>
	<td>1006</td>
	<td>Drugs, Drug Proprietaries, and Druggist Sundries</td>
	</tr>

	</tbody>
	</table>
	</body>
	</html>
	<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>