скрытие ненужных строк таблицы (почти поиск)

[m3hc]

Всем привет, опыта в 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")

[crayday]

вместо 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();
		}
	});
});

[crayday]

Ещё имеет смысл при проверке перевести всё в нижний регистр - и ввод пользователя и содержание ячейки

[m3hc]

Спасибо, всё работает, всё логино!

[walik]

мб так:

$('.table-class tr:not(:first)').filter(function() {
    return !$(this).find('td:eq(1):contains(Москва)').length;
  }).hide();

[crayday]

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>

[melky]

моя версия
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>