CODEWITHSUNDEEP
htmlsearchindexingfilterhtml-table
redrain1345
redrain1345

Reputation: 35

Filter table with multiple columns

Just trying to filter a table but also have it filter the number with and without dashes (working) but also search the name and id as well. Its only searching the one column since the index is [0].

How would I have it search all 3 columns? So if I search number or id or name it would filter. Here is the working code I have so far to search number.

<!DOCTYPE html>    
<html>   
<head>    
<style>    
* {    
  box-sizing: border-box;    
}

#myInput {    
  background-image: url('/css/searchicon.png');    
  background-position: 10px 10px;    
  background-repeat: no-repeat;    
  width: 100%;    
  font-size: 16px;    
  padding: 12px 20px 12px 40px;    
  border: 1px solid #ddd;    
  margin-bottom: 12px;    
}

#myTable {    
  border-collapse: collapse;    
  width: 100%;    
  border: 1px solid #ddd;    
  font-size: 18px;    
}

#myTable th, #myTable td {    
  text-align: left;    
  padding: 12px;    
}

#myTable tr {    
  border-bottom: 1px solid #ddd;    
}

#myTable tr.header, #myTable tr:hover {    
  background-color: #f1f1f1;    
}    
</style>

</head>    
<body>        

<h2>Number search</h2>    

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">        

<table id="myTable">    
  <tr class="header">    
    <th style="width:60%;">Number</th>
    <th style="width:60%;">Name</th>
    <th style="width:60%;">ID</th>    
  </tr>    
  <tr>    
    <td>905-373-3333</td>
    <td>Mike</td>
    <td>4563</td>    
  </tr>    
  <tr>    
     <td>905-333-3333</td>
    <td>adam</td>
    <td>8963</td>    
  </tr>    
  <tr>    
    <td>416-373-3432</td>
    <td>Jim</td>
    <td>9363</td>    
  </tr>    
</table>        

<script>    
function myFunction() {    
  var input, filter, table, tr, td, i, cleanedFilter;    
  input = document.getElementById("myInput");    
  filter = input.value.toUpperCase();    
  table = document.getElementById("myTable");    
  tr = table.getElementsByTagName("tr");          

  cleanedFilter = filter.replace("-","");          

  for (i = 0; i < tr.length; i++) {    
    td = tr[i].getElementsByTagName("td")[0];            

    if (td) {    
      cellContent = td.innerHTML.toUpperCase().replace(/-/g,"");            

      if (cellContent.indexOf(cleanedFilter) > -1) {    
        tr[i].style.display = "";    
      } else {    
        tr[i].style.display = "none";    
      }    
    }           
  }    
}    
</script>        

</body>    
</html>

Upvotes: 1

Views: 2086

Answers (1)

Datacrawler
Datacrawler

Reputation: 2876

If you want to use a filter for every td available in your rows, you can use the following:

(function(document) {
	'use strict';

	var LightTableFilter = (function(Arr) {

		var _input;

		function _onInputEvent(e) {
			_input = e.target;
			var tables = document.getElementsByClassName(_input.getAttribute('data-table'));
			Arr.forEach.call(tables, function(table) {
				Arr.forEach.call(table.tBodies, function(tbody) {
					Arr.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';
		}

		return {
			init: function() {
				var inputs = document.getElementsByClassName('light-table-filter');
				Arr.forEach.call(inputs, function(input) {
					input.oninput = _onInputEvent;
				});
			}
		};
	})(Array.prototype);

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

})(document);
<section class="container">

	<input type="search" class="light-table-filter" data-table="order-table" placeholder="Filter">

	<table class="order-table table">
		<thead>
			<tr>
				<th>Column 1</th>
				<th>Column 2</th>
				<th>Number 2</th>
				<th>Number 2</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>Column One</td>
				<td>Two</td>
				<td>352353</td>
				<td>1</td>
			</tr>
			<tr>
				<td>Column Two</td>
				<td>Two</td>
				<td>4646</td>
				<td>2</td>
			</tr>
		</tbody>
	</table>

</section>

Upvotes: 1

Related Questions