скрытие ненужных строк таблицы (почти поиск)
Всем привет, опыта в JQ почти нет, а надо сделать скрытие ненужных строк в таблице
<input type="text" id="filter-input" value=""/><br/> <table class="table-class"> <tr> <th>Username</th><th>Adress</th><th>Acess</th> </tr> <tr> <td>Вася</td><td>Москва</td><td>Read</td> </tr> <tr> <td>Лёша</td><td>Питер</td><td>Write</td> </tr> </table> То есть, при введении в input "М", "Мо", "Мос", "Москва" - оставался только Вася, фильтрация только по второму столбцу запуск логики по нажатию клавиши я допёр, $("#filter-input").live('keyup', function(e){ }; а вот как дальше обойти каждую строку и взять в ней значение второго столбца , как-то не гуглиться, скрытие строки думаю реализовать добавлением класса, в котором display:none; $(this).addClass("hide-class") |
вместо live просто bind - пока в live необходимости нет (или лучше коротко keyup).
Внутри функции ищем вторые столбцы и смотрим, удовлетворяют ли они поиску или нет. Если не удовлетворяют - скрываем hide(), удовлетворяют - показываем show() (короче, чем добавлять класс .hide-class) var filter = $("#filter-input"); filter.keyup(function(e){ $('.table-class td:nth-child(2)').each(function(){ if(filter.val() != $(this).text().substr(0, filter.val().length)) { $(this).parent().hide(); } else { $(this).parent().show(); } }); }); |
Ещё имеет смысл при проверке перевести всё в нижний регистр - и ввод пользователя и содержание ячейки
|
Спасибо, всё работает, всё логино!
|
мб так:
$('.table-class tr:not(:first)').filter(function() { return !$(this).find('td:eq(1):contains(Москва)').length; }).hide(); |
walik,
Как лаконично! =) Только не предусмотрено проявление элементов обратно. |
<input type="text" id="filter-input" value=""/><br/> <table class="table-class"> <tr> <th>Username</th><th>Adress</th><th>Acess</th> </tr> <tr> <td>Вася</td><td>Москва</td><td>Read</td> </tr> <tr> <td>Лёша</td><td>Питер</td><td>Write</td> </tr> </table> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script> var filter = $("#filter-input"); filter.keyup(function(e) { var niddle = $(this).val(); $('.table-class tr:not(:first)').filter(function() { if (!$(this).find('td:eq(1)').is(':contains("' + niddle + '")')) { return true; } else { $(this).show(); return false; } }).hide(); }); </script> |
моя версия
Extends : ваый's version; живой пример : trArr = $(".table-class tr:not(:first)"); townArr = $("td:nth-child(2n+2)", trArr); $("#filter-input").keyup(function() { if(!this.value) return trArr.show() trArr.hide(); townArr.filter(":contains("+this.value+")").parent("tr").show(); }); <input type="text" id="filter-input" value=""/><br/> <table class="table-class"> <tr> <th>Username</th><th>Adress</th><th>Acess</th> </tr> <tr> <td>Вася</td><td>Москва</td><td>Read</td> </tr> <tr> <td>Лёша</td><td>Питер</td><td>Write</td> </tr> </table> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script> trArr = $(".table-class tr:not(:first)"); townArr = $("td:nth-child(2n+2)", trArr); $("#filter-input").keyup(function() { if(!this.value) return trArr.show() trArr.hide(); townArr.filter(":contains("+this.value+")").parent("tr").show(); }); </script> |
Часовой пояс GMT +3, время: 23:08. |