Фильтрация данных в таблице JavaScript

Этот вариант фильтрации позволяет фильтровать данные в таблице по всем столбцам и по нескольким. Те строки, которые не подходят под введенные в фильтр данные будут скрываться.

Фильтрация по всем столбцам

Для этого надо задать таблице id=»sf», а поле input, в который будет вводиться фильтруемый текст дописать вызов функции с передачей id таблицы onkeyup=»filter(this, ‘sf’)».

<script type="text/javascript">
   	function filter (phrase, _id){
		var words = phrase.value.toLowerCase().split(" ");
		var table = document.getElementById(_id);
		var ele;
		for (var r = 1; r < table.rows.length; r++){
			ele = table.rows[r].innerHTML.replace(/<[^>]+>/g,"");
		        var displayStyle = 'none';
		        for (var i = 0; i < words.length; i++) {
			    if (ele.toLowerCase().indexOf(words[i])>=0)
				displayStyle = '';
			    else {
				displayStyle = 'none';
				break;
			    }
		        }
			table.rows[r].style.display = displayStyle;
		}
	}
  </script>
  
  Фильтр по всем полям<br />
  <input name="filt" onkeyup="filter(this, 'sf')" style="width:350px;" type="text" /><br /><br />
  
<table id="sf" border="0" cellpadding="2" cellspacing="1" width="100%">		<tbody><tr>Данные вашей таблицы</tr></tbody></table>

В случае фильтрации по определенным столбцам надо всего лишь указать номера столбцов (первый столбец имеет номер 0) в скрипте. Например, cells[0]. Если столбцов больше двух — надо добавить переменные cellsV3 и т.д. и потом не забыть склеить их в одну переменную cellsV.

<script type="text/javascript">
   	function filter2 (phrase, _id){
		var words = phrase.value.toLowerCase().split(" "); 
		var table = document.getElementById(_id); 
		for (var r = 1; r < table.rows.length; r++){ 
			var cellsV1 = table.rows[r].cells[0].innerHTML.replace(/<[^>]+>/g,""); //указать первый столбец
			var cellsV2 = table.rows[r].cells[3].innerHTML.replace(/<[^>]+>/g,""); //указать второй столбец
			var cellsV = [cellsV1,cellsV2].join(" "); //соединить столбцы для сравнения с введенными данными
		    var displayStyle = 'none';
		    for (var i = 0; i < words.length; i++) {
			if (cellsV.toLowerCase().indexOf(words[i])>=0)
				displayStyle = ''; 
			else {
				displayStyle = 'none'; 
				break;
			}
			}
		table.rows[r].style.display = displayStyle; 
		}
	}
  </script>
  
  Фильтр по полям Project  и Activity <br />
  <input name="filt" onkeyup="filter2(this, 'sf')" style="width:350px;" type="text" />
  
<table id="sf" border="0" cellpadding="2" cellspacing="1" width="100%">		<tbody><tr>Данные вашей таблицы</tr></tbody></table>