jQuery – Как фильтровать строки по клику?

Question

Я пытаюсь понять, как фильтровать таблицу на основе класса строки, когда я нажимаю кнопку.Я просматривал различные плагины jquery, но ни один из них, похоже, не делает того, что мне нужно.У некоторых есть текстовые поля, которые фильтруют и т. д., и я пытался адаптировать код, но, честно говоря, я просто создаю большой беспорядок...Помощь?У меня есть таблица, которая выглядит так:

<table>
<tr class="dr"><td>data</td></tr>
<tr class="dr"><td>data</td></tr>
<tr class="sr"><td>data</td></tr>
<tr class="mr"><td>data</td></tr>
<tr class="mr"><td>data</td></tr>
<tr class="dr"><td>data</td></tr>
<tr class="dr"><td>data</td></tr>
<tr class="sr"><td>data</td></tr>
<tr class="sr"><td>data</td></tr>
<tr class="sr"><td>data</td></tr>
<tr class="sr"><td>data</td></tr>
</table>

И у меня есть три кнопки:

<input type="button" name="filterdr" /> <!-- clicking this will only show rows with dr class -->
<input type="button" name="filtersr" /> <!-- clicking this will only show rows with sr class -->
<input type="button" name="filtermr" /> <!-- clicking this will only show rows with mr class -->

Answer 1

Вы можете сделать что -то вроде ниже соответственно для каждой кнопки нажатия, она должна сработать.

$("tr:not(.dr)").hide();
$("tr.dr").show();

Т.е.:

$(document).ready(function(){
    $(":button[name='filterdr']").click(function(){
        $("tr:not(.dr)").hide();
        $("tr.dr").show();
    });
});

Answer 2

Что -то подобное может сделать свое дело:

$('input[type=button]').click(function()
{
    $('tr').hide()
        .filter('.' + this.name.replace(/filter/, '')).show();
});

Добавление идентификатора в ваш стол было бы хорошей идеей.

Answer 3

<input type="button" id="filterdr" /> <!-- clicking this will only show rows with dr class -->
<input type="button" id="filtersr" /> <!-- clicking this will only show rows with sr class -->
<input type="button" id="filtermr" /> <!-- clicking this will only show rows with mr class -->

JQuery:

$('#filterdr').click(function() { 
   $('table tr').hide();
   $('table tr.dr').show();
});

И вы делаете то же самое для других кнопок.

Answer 4

Таблицы данных делает именно то, что вам нужно:

• Фильтрация столбцов или строк
• Обработка событий для создания строки
• Фильтрация для всех столбцов из одного текстового поля поиска
• Многоколоночная сортировка
• Редактируемые строки

Я использовал это в производственных проектах, а в некоторых случаях предпочитал использовать DataTables вместо Telerik RadGrad.Это очень гибко и отлично подходит для RIA.