скрытие ненужных строк таблицы (почти поиск)
Всем привет, опыта в 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:53. |