jQuery – Как фильтровать строки по клику?
-
18-09-2019 - |
Вопрос
Я пытаюсь понять, как фильтровать таблицу на основе класса строки, когда я нажимаю кнопку.Я просматривал различные плагины 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 -->
Решение
Вы можете сделать что -то вроде ниже соответственно для каждой кнопки нажатия, она должна сработать.
$("tr:not(.dr)").hide();
$("tr.dr").show();
Т.е.:
$(document).ready(function(){
$(":button[name='filterdr']").click(function(){
$("tr:not(.dr)").hide();
$("tr.dr").show();
});
});
Другие советы
Что -то подобное может сделать свое дело:
$('input[type=button]').click(function()
{
$('tr').hide()
.filter('.' + this.name.replace(/filter/, '')).show();
});
Добавление идентификатора в ваш стол было бы хорошей идеей.
<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();
});
И вы делаете то же самое для других кнопок.
Таблицы данных делает именно то, что вам нужно:
- Фильтрация столбцов или строк
- Обработка событий для создания строки
- Фильтрация для всех столбцов из одного текстового поля поиска
- Многоколоночная сортировка
- Редактируемые строки
Я использовал это в производственных проектах, а в некоторых случаях предпочитал использовать DataTables вместо Telerik RadGrad.Это очень гибко и отлично подходит для RIA.