Двойная Фильтрация данных таблицы
Доброго всем времени суток. Почитал учебники и статьи в интернете, но не смог найти решения для своей проблемы.
Есть таблица данных, в которой присутствую два пармметра, по которым нужно фильтровать таблицу ( количество камер внутри и вне помещения) <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>
Есть ли возможность реализовать фильтрацию так, чтобы результаты отражали только точные сопадения по данным введёным в поля количества камер? Заранее благодарю всех, кто откликнется. |
| Часовой пояс GMT +3, время: 23:41. |