Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 19.03.2012, 12:00
Новичок на форуме
Отправить личное сообщение для David0707 Посмотреть профиль Найти все сообщения от David0707
 
Регистрация: 19.03.2012
Сообщений: 1

Двойная Фильтрация данных таблицы
Доброго всем времени суток. Почитал учебники и статьи в интернете, но не смог найти решения для своей проблемы.

Есть таблица данных, в которой присутствую два пармметра, по которым нужно фильтровать таблицу ( количество камер внутри и вне помещения)
<h2>Готовые комплекты</h2>

Введите количество внутренних видеокамер( от 0 до 4)<br />
  <input name="filt" onkeyup="filter(this, 'sf')" style="width:350px;" type="text" /><br /><br />
Введите количество уличных видеокамер ( от 0 до 4)<br />
  <input name="filt" onkeyup="filter2(this, 'sf')" style="width:350px;" type="text" />
  <br /><br /><br />
  <table id="sf" border="0" cellpadding="2" cellspacing="1" width="100%">
		<tbody><tr bgcolor="93b8ee">
			<td align="MIDDLE"><strong>Название комплекта</strong></td>
		  <td align="MIDDLE"><b>Описание</b></td>
		  <td align="MIDDLE"><b>Внутренние Видеокамеры</b></td>
		  <td align="MIDDLE"><p><b>Уличные Камеры </b></p>
	      </td>
		</tr><tr bgcolor="#ffffff"> <td><img src="menu/dom1.png" width="130" height="130"></td>
		<td>Cisco CPS-START-BNDL1 включает в себя IP-камеры с варифокальным объективом, программное обеспечение видеонаблюдения, сервер и жесткий диск для хранения данных. </td>
		<td> 0</td>
		<td>3</td>
		</tr><tr style="" bgcolor="#8dbbff"> <td><img src="menu/dom2.png" width="130" height="130"></td>
		<td>Cisco CPS-START-BNDL1 включает в себя IP-камеры с варифокальным объективом, программное обеспечение видеонаблюдения, сервер и жесткий диск для хранения данных. </td>
		<td> 2
</td>
		<td>0</td>
		</tr><tr> <td><img src="menu/dom3.png" width="130" height="130"></td>
<td>Cisco CPS-START-BNDL1 включает в себя IP-камеры с варифокальным объективом, программное обеспечение видеонаблюдения, сервер и жесткий диск для хранения данных. </td>
<td> 4</td>
<td>2</td>
		</tr><tr   bgcolor="#8dbbff"> <td><img src="menu/dom4.png" width="130" height="130"></td>
<td>Cisco CPS-START-BNDL1 включает в себя IP-камеры с варифокальным объективом, программное обеспечение видеонаблюдения, сервер и жесткий диск для хранения данных. </td>
<td> 2</td>
<td>4</td>
		</tr><tr> <td><img src="menu/dom5.png" width="130" height="130"></td>
<td>Cisco CPS-START-BNDL1 включает в себя IP-камеры с варифокальным объективом, программное обеспечение видеонаблюдения, сервер и жесткий диск для хранения данных. </td>
<td> 0</td>
<td>1</td>
		</tr><tr   bgcolor="#8dbbff"> <td><img src="menu/dom6.png" width="130" height="130"></td>
<td>Cisco CPS-START-BNDL1 включает в себя IP-камеры с варифокальным объективом, программное обеспечение видеонаблюдения, сервер и жесткий диск для хранения данных. </td>
<td>0 </td>
<td>4</td>
		</tr><tr> <td><img src="menu/doma.png" width="130" height="130"></td>
<td>Cisco CPS-START-BNDL1 включает в себя IP-камеры с варифокальным объективом, программное обеспечение видеонаблюдения, сервер и жесткий диск для хранения данных. </td>
<td> 4</td>
<td>4</td>
		</tr><tr   bgcolor="#8dbbff"> <td><img src="menu/shop.png" width="130" height="130"></td>
<td>Cisco CPS-START-BNDL1 включает в себя IP-камеры с варифокальным объективом, программное обеспечение видеонаблюдения, сервер и жесткий диск для хранения данных. </td>
<td> 2</td>
<td>3</td>
		</tr><tr> <td><img src="menu/dom1.png" width="130" height="130"></td>
<td>Cisco CPS-START-BNDL1 включает в себя IP-камеры с варифокальным объективом, программное обеспечение видеонаблюдения, сервер и жесткий диск для хранения данных. </td>
<td> 3</td>
<td>0</td>
		</tr><tr   bgcolor="#8dbbff"> <td><img src="menu/dom5.png" width="130" height="130"></td>
<td>Cisco CPS-START-BNDL1 включает в себя IP-камеры с варифокальным объективом, программное обеспечение видеонаблюдения, сервер и жесткий диск для хранения данных. </td>
<td> 1</td>
<td>0</td>
		</tr><tr> <td><img src="menu/dom6.png" width="130" height="130"></td>
<td>Cisco CPS-START-BNDL1 включает в себя IP-камеры с варифокальным объективом, программное обеспечение видеонаблюдения, сервер и жесткий диск для хранения данных. </td>
<td> 3</td>
<td>3</td>
		</tr><tr   bgcolor="#8dbbff"> <td><img src="menu/dom4.png" width="130" height="130"></td>
<td>Cisco CPS-START-BNDL1 включает в себя IP-камеры с варифокальным объективом, программное обеспечение видеонаблюдения, сервер и жесткий диск для хранения данных. </td>
<td> 2</td>
<td>0</td>
		</tr><tr> <td><img src="menu/dom5.png" width="130" height="130"></td>
<td>Cisco CPS-START-BNDL1 включает в себя IP-камеры с варифокальным объективом, программное обеспечение видеонаблюдения, сервер и жесткий диск для хранения данных. </td>
<td> 4</td>
<td>4</td>
		</tr></table>

Мне удалось реализовать фильтрацию по ним, но в конце выдаёт смешанные результаты. ( Тоесть после ввода данных в оба поля он показывает все данные по совпадению по обоим парамметрам ):
<script type="text/javascript">
   	function filter (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[2].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>


<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>

Есть ли возможность реализовать фильтрацию так, чтобы результаты отражали только точные сопадения по данным введёным в поля количества камер?
Заранее благодарю всех, кто откликнется.
Ответить с цитированием
Ответ


Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Через ajax отправить много данных из таблицы на сервер Heger jQuery 3 29.08.2012 18:51
Изменение окраски строк таблицы, исходя из данных? Space-06 Events/DOM/Window 4 14.02.2012 20:32
Сортировка и фильтрация json jQuery amt779 jQuery 4 28.07.2011 12:53
Ширина таблицы Syltan (X)HTML/CSS 1 01.05.2010 22:33
Фиксированный заголовок таблицы ilshat Элементы интерфейса 6 20.12.2008 00:35