Показать сообщение отдельно
  #1 (permalink)  
Старый 03.11.2014, 02:48
Кандидат Javascript-наук
Отправить личное сообщение для sashgera Посмотреть профиль Найти все сообщения от sashgera
 
Регистрация: 20.09.2011
Сообщений: 140

Фильтр таблицы HTML
Здравствуйте
Есть таблица с двумя селектами, при выборе которых происходит фильтрация (скрытие строк)
Как можно сделать фильтрацию взаимосвязанной?
Например, если отфильтровать строки в одном из столбцов, как-то сохранить результат, а из оставшихся строк сделать выборку по другому столбцу
пример: http://www.glass-pgc.ru/UntitledKM.html
<script type="text/javascript">
//фильтрация по 1 столбцу
   	function filter1 (phrase, _id){
		var words = phrase.value.toLowerCase().split(" "); 
		var table = document.getElementById(_id); 
		for (var r = 1; r < table.rows.length; r++){ //сколько строк сверху не фильтровать
			var cellsV = table.rows[r].cells[0].innerHTML.replace(/<[^>]+>/g,""); // 1 столбец для фильтрации
			var cellsV = [cellsV].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; 
		}
	}
	
//фильтрация по 2 столбцу
	function filter11 (phrase, _id){
		var words = phrase.value.toLowerCase().split(" "); 
		var table = document.getElementById(_id); 
		for (var r = 1; r < table.rows.length; r++){ //сколько строк сверху не фильтровать
			var cellsV = table.rows[r].cells[1].innerHTML.replace(/<[^>]+>/g,""); // 2 столбец для фильтрации
			var cellsV = [cellsV].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>

<table id="sf" style="width: 400px;" border="1" cellpadding="0" cellspacing="0">
  <tr>
    <td><select name="filt" onchange="filter1(this, 'sf'); this.options[0].selected = true; ">
<option value="">-- Выбрать --</option>
<option value="">Все наименования</option> 
<option value="зеленый">зеленый</option> 
<option value="красный">красный</option> 
</select> </td>
    <td><select name="filt" onchange="filter11(this, 'sf'); this.options[0].selected = true; ">
<option value="">-- Выбрать --</option>
<option value="">Все наименования</option> 
<option value="да">да</option> 
<option value="нет">нет</option> 
</select></td>
  </tr>
  <tr>
    <td>зеленый 1</td>
    <td>да</td>
  </tr>
  <tr>
    <td>зеленый 2</td>
    <td>нет</td>
  </tr>
  <tr>
    <td>красный 1</td>
    <td>нет</td>
  </tr>
  <tr>
    <td>красный 2</td>
    <td>да</td>
  </tr>
</table>
Ответить с цитированием