Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   скрытие ненужных строк таблицы (почти поиск) (https://javascript.ru/forum/jquery/21246-skrytie-nenuzhnykh-strok-tablicy-pochti-poisk.html)

m3hc 02.09.2011 15:00

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

вместо 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 02.09.2011 15:26

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

m3hc 02.09.2011 15:59

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

walik 02.09.2011 16:02

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

crayday 02.09.2011 18:21

walik,
Как лаконично! =) Только не предусмотрено проявление элементов обратно.

ваый 02.09.2011 18:53

<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 02.09.2011 22:34

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