<style type="text/css">
.off-name{
background-color:#9F6;
}
.off-city{
background-color:#FFC;
}
.off-address{
background-color:#9FC;
}
.off-exval{
background-color:#F9C;
}
.off-exchange{
background-color:#F90;
}
</style>
<div align="center">
<input type="text" name="ExchangeEdit" id="ExchangeEdit" onkeyup="findExchanges(this.value)" />
</div>
<p></p>
<table class="ex-table" border="0" cellspacing="0" cellpadding="0" width="100%">
<tbody>
<tr valign="top">
<th>Название</th>
<th>Город</th>
<th>Адрес</th>
<th>Валюта</th>
<th>Покупка</th>
<th>Продажа</th>
</tr>
<tr>
<td class="off-name" rowspan="2">Один</td>
<td class="off-city" rowspan="2">Москва</td>
<td class="off-address" rowspan="2">ул. Автозаводская, д.
1</td>
<td class="off-exval">USD</td>
<td class="off-exchange" rowspan="2" colspan="2">
<table border="0" cellspacing="0" cellpadding="0" width="100%" height="100%">
<tbody>
<tr>
<td>29.10</td>
<td>29.90</td>
</tr>
<tr>
<td>41.90</td>
<td>43.10</td>
</tr>
</tbody>
</table></td>
</tr>
<tr>
<td class="off-exval">EUR</td>
</tr>
<tr>
<td class="off-name" rowspan="2">Два</td>
<td class="off-city" rowspan="2">Питер</td>
<td class="off-address" rowspan="2">ул. Бутырский вал, д.
20</td>
<td class="off-exval">USD</td>
<td class="off-exchange" rowspan="2" colspan="2">
<table border="0" cellspacing="0" cellpadding="0" width="100%" height="100%">
<tbody>
<tr>
<td>29.00</td>
<td>29.90</td>
</tr>
<tr>
<td>41.90</td>
<td>43.00</td>
</tr>
</tbody>
</table></td>
</tr>
<tr>
<td class="off-exval">EUR</td>
</tr>
<tr>
<td class="off-name" rowspan="2">Три</td>
<td class="off-city" rowspan="2">Москва</td>
<td class="off-address" rowspan="2">ул. Пушкинская, д. 30</td>
<td class="off-exval">USD</td>
<td class="off-exchange" rowspan="2" colspan="2">
<table border="0" cellspacing="0" cellpadding="0" width="100%" height="100%">
<tbody>
<tr>
<td>29.00</td>
<td>29.90</td>
</tr>
<tr>
<td>41.90</td>
<td>43.20</td>
</tr>
</tbody>
</table></td>
</tr>
<tr>
<td class="off-exval">EUR</td>
</tr>
<tr>
<td class="off-name" rowspan="2">Четыре</td>
<td class="off-city" rowspan="2">Воронеж</td>
<td class="off-address" rowspan="2">ул. Коньковская, д. 6</td>
<td class="off-exval">USD</td>
<td class="off-exchange" rowspan="2" colspan="2">
<table border="0" cellspacing="0" cellpadding="0" width="100%" height="100%">
<tbody>
<tr>
<td>30.50</td>
<td>30.90</td>
</tr>
<tr>
<td>40.40</td>
<td>40.50</td>
</tr>
</tbody>
</table></td>
</tr>
<tr>
<td class="off-exval">EUR</td>
</tr>
</tbody>
</table>
Скромный фильтр на JavaScript
Всем привет.
Есть необходимость реализовать фильтр на странице. Суть в том, что в зависимости от текста введенного пользователем, в таблице с данными остаются только те строки которые содержат введенны текст. Т. е. грубо говоря поиск.
Исходная таблица, для примера заполнил данными по курсам валют, имеет следующий вид:
Сам скрипт поиска таков
Суть проблемы заключается в том, что в IE все работает вроде бы корректно, но если попробовать воспользоваться например Oper'ой, то при перфой же "фильтрации" из таблицы получается каша. Строки вроде бы остаются нужные, только вот форматирование таблицы куда то исчезает :) Я вообще недавно только начал заниматься веб программирование, а если точнее это мой первый JavaScript :) поэтому может есть какие другие ошибки в коде или что то лучше по другому писать, подскажите, буду признателен.
Есть необходимость реализовать фильтр на странице. Суть в том, что в зависимости от текста введенного пользователем, в таблице с данными остаются только те строки которые содержат введенны текст. Т. е. грубо говоря поиск.
Исходная таблица, для примера заполнил данными по курсам валют, имеет следующий вид:
Код:
Сам скрипт поиска таков
Код:
<script language="JavaScript" type="text/javascript">
function findExchanges(srch_str)
{
var elems, ritems, ditems,
cell_str,
i, c, x,
finded;
elems = document.body.getElementsByTagName("TABLE");
if(srch_str.length > 0)
{
srch_str = srch_str.toUpperCase();
for(i = 0; i < elems.length; i++)
{
if(elems.item(i).className == "ex-table")
{
ritems = elems.item(i).getElementsByTagName("TR");
c = 1;
while(c < ritems.length)
{
ditems = ritems.item(c).getElementsByTagName("TD");
x = 0;
finded = false;
while(x < ditems.length)
{
if( (ditems.item(x).className == "off-name") ||
(ditems.item(x).className == "off-city") ||
(ditems.item(x).className == "off-address"))
{
cell_str = ditems.item(x).childNodes[0].data;
cell_str = cell_str.toUpperCase();
if(cell_str.indexOf(srch_str) >= 0)
{
ritems.item(c).style.display = "block";
ritems.item(c + 3).style.display = "block";
c = c + 3;
finded = true;
break;
}
}
x++;
}
if(finded == false)
{
ritems.item(c).style.display = "none";
ritems.item(c + 3).style.display = "none";
c = c + 4;
continue;
}
c++;
}
break;
}
}
}
else
{
for(i = 0; i < elems.length; i++)
{
if(elems.item(i).className == "ex-table")
{
ritems = elems.item(i).getElementsByTagName("TR");
c = 1;
while(c < ritems.length)
{
ritems.item(c).style.display = "block";
c++;
}
break;
}
}
}
}
</script>
function findExchanges(srch_str)
{
var elems, ritems, ditems,
cell_str,
i, c, x,
finded;
elems = document.body.getElementsByTagName("TABLE");
if(srch_str.length > 0)
{
srch_str = srch_str.toUpperCase();
for(i = 0; i < elems.length; i++)
{
if(elems.item(i).className == "ex-table")
{
ritems = elems.item(i).getElementsByTagName("TR");
c = 1;
while(c < ritems.length)
{
ditems = ritems.item(c).getElementsByTagName("TD");
x = 0;
finded = false;
while(x < ditems.length)
{
if( (ditems.item(x).className == "off-name") ||
(ditems.item(x).className == "off-city") ||
(ditems.item(x).className == "off-address"))
{
cell_str = ditems.item(x).childNodes[0].data;
cell_str = cell_str.toUpperCase();
if(cell_str.indexOf(srch_str) >= 0)
{
ritems.item(c).style.display = "block";
ritems.item(c + 3).style.display = "block";
c = c + 3;
finded = true;
break;
}
}
x++;
}
if(finded == false)
{
ritems.item(c).style.display = "none";
ritems.item(c + 3).style.display = "none";
c = c + 4;
continue;
}
c++;
}
break;
}
}
}
else
{
for(i = 0; i < elems.length; i++)
{
if(elems.item(i).className == "ex-table")
{
ritems = elems.item(i).getElementsByTagName("TR");
c = 1;
while(c < ritems.length)
{
ritems.item(c).style.display = "block";
c++;
}
break;
}
}
}
}
</script>
Суть проблемы заключается в том, что в IE все работает вроде бы корректно, но если попробовать воспользоваться например Oper'ой, то при перфой же "фильтрации" из таблицы получается каша. Строки вроде бы остаются нужные, только вот форматирование таблицы куда то исчезает :) Я вообще недавно только начал заниматься веб программирование, а если точнее это мой первый JavaScript :) поэтому может есть какие другие ошибки в коде или что то лучше по другому писать, подскажите, буду признателен.
Сделайте на основе какого-нибудь распространенного фреймворка вроде того же jQuery
Цитата: RussianSpy
Сделайте на основе какого-нибудь распространенного фреймворка вроде того же jQuery
спасибо, постараюсь разобраться :) посмотрел примерчики, достаточно мощная библиотека и кода писать меньше надо.
Вот что я сообразил после некоторого изучения :) Может кому тоже понадобиться
Код
Уверен, что код на jQuery можно еще оптимизировать, пока написал так как смог :)
Да может кто подскажет почему то если осуществлять поиск скрытых строк по фильтру :hidden, то ничего не находит, а по :notvisible все в порядке?
Код
Код:
$(document).ready(function(){
$("input.echange-edit:text").keyup(function() {
var fnd_str = $(this).val();
var i = 0;
if(fnd_str.length == 0) {
$("table.exchange-table tr:notvisible").show();
}
else
{
var arv_rows = $("table.exchange-table tr.exchange-drw:visible"),
arh_rows = $("table.exchange-table tr.exchange-drw:notvisible");
var flag = false;
fnd_str = fnd_str.toUpperCase();
arv_rows.filter(function(index){
if((index % 2) != 1){
if($(this).children("td.exchange-off_name, td.exchange-off_city, td.exchange-off_address").filter(function(num){
return ($(this).text().toUpperCase().indexOf(fnd_str) >= 0);
}).length > 0){
flag = false;
}
else{
flag = true;
}
return flag;
}
else{
return flag;
}
}).hide();
arh_rows.filter(function(index){
if((index % 2) != 1){
if($(this).children("td.exchange-off_name, td.exchange-off_city, td.exchange-off_address").filter(function(num){
return ($(this).text().toUpperCase().indexOf(fnd_str) >= 0);
}).length > 0){
flag = true;
}
else{
flag = false;
}
return flag;
}
else{
return flag;
}
}).show();
}
});
});
$("input.echange-edit:text").keyup(function() {
var fnd_str = $(this).val();
var i = 0;
if(fnd_str.length == 0) {
$("table.exchange-table tr:notvisible").show();
}
else
{
var arv_rows = $("table.exchange-table tr.exchange-drw:visible"),
arh_rows = $("table.exchange-table tr.exchange-drw:notvisible");
var flag = false;
fnd_str = fnd_str.toUpperCase();
arv_rows.filter(function(index){
if((index % 2) != 1){
if($(this).children("td.exchange-off_name, td.exchange-off_city, td.exchange-off_address").filter(function(num){
return ($(this).text().toUpperCase().indexOf(fnd_str) >= 0);
}).length > 0){
flag = false;
}
else{
flag = true;
}
return flag;
}
else{
return flag;
}
}).hide();
arh_rows.filter(function(index){
if((index % 2) != 1){
if($(this).children("td.exchange-off_name, td.exchange-off_city, td.exchange-off_address").filter(function(num){
return ($(this).text().toUpperCase().indexOf(fnd_str) >= 0);
}).length > 0){
flag = true;
}
else{
flag = false;
}
return flag;
}
else{
return flag;
}
}).show();
}
});
});
Уверен, что код на jQuery можно еще оптимизировать, пока написал так как смог :)
Да может кто подскажет почему то если осуществлять поиск скрытых строк по фильтру :hidden, то ничего не находит, а по :notvisible все в порядке?