Фильтр таблицы по классу
Возможно ли создать фильтр, чтобы искал несколько значений в классе.
Например: class="f-Кольцо f-Кольцо f-Пояс". Нужно чтобы фильтр искал именно эти совпадения и в разной последованности. Селекторами я выбираю "Кольцо Кольцо Пояс" или "Кольцо Пояс Кольцо" и ищет эти значения в классе, а класс один и тот же "class="f-Кольцо f-Кольцо f-Пояс"". Классы могут совпадать.
<tr "class="f-Кольцо f-Кольцо f-Пояс">
<td>Кольцо</td>
<td>Кольцо</td>
<td>Пояс</td>
</tr>
<tr class="f-Кольцо f-Пояс f-Кольцо">
<td>Кольцо</td>
<td>Пояс</td>
<td>Кольцо</td>
</tr>
<div class="table-filters">
Ячейка предметов 1 <select id="itemslot1-filter">
<option>Все</option>
<option value="Икона">Икона</option>
<option value="Кольцо">Кольцо</option>
<option value="Пояс">Пояс</option>
<option value="Талисман">Талисман</option>
<option value="Темляк">Темляк</option>
<option value="Шея">Шея</option>
</select>
Ячейка предметов 2 <select id="itemslot2-filter">
<option>Все</option>
<option value="Икона">Икона</option>
<option value="Кольцо">Кольцо</option>
<option value="Пояс">Пояс</option>
<option value="Талисман">Талисман</option>
<option value="Темляк">Темляк</option>
<option value="Шея">Шея</option>
</select>
Ячейка предметов 3 <select id="itemslot3-filter">
<option>Все</option>
<option value="Икона">Икона</option>
<option value="Кольцо">Кольцо</option>
<option value="Пояс">Пояс</option>
<option value="Талисман">Талисман</option>
<option value="Темляк">Темляк</option>
<option value="Шея">Шея</option>
</select>
</div>
<table id="filter-table">
<thead>
<tr>
<th>Ячейка предметов 1</th>
<th>Ячейка предметов 2</th>
<th>Ячейка предметов 3</th>
</tr>
</thead>
<tbody>
<tr data-filter="Кольцо,Шея,Пояс">
<td>Кольцо</td>
<td>Шея</td>
<td>Пояс</td>
</tr>
<tr data-filter="Шея,Пояс,Кольцо">
<td>Шея</td>
<td>Пояс</td>
<td>Кольцо</td>
</tr>
<tr data-filter="Темляк,Шея,Кольцо">
<td>Темляк</td>
<td>Шея</td>
<td>Кольцо</td>
</tr>
<tr data-filter="Кольцо,Кольцо,Кольцо">
<td>Кольцо</td>
<td>Кольцо</td>
<td>Кольцо</td>
</tr>
<tr data-filter="Кольцо,Кольцо,Талисман">
<td>Кольцо</td>
<td>Кольцо</td>
<td>Талисман</td>
</tr>
</tbody>
</table>
|
Anonket,
так можно сделать?
<tr data-filter="Кольцо,Шея,Пояс">
<td>Кольцо</td>
<td>Шея</td>
<td>Пояс</td>
</tr>
|
Цитата:
|
Anonket,
отредактируйте строки в первом сообщении, добавьте data-filter |
Добавил
|
фильтрация строк таблицы
Anonket,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
var pattern = [],
trs = $("#filter-table tbody tr");
$(".table-filters select").each(function(i, select) {
var el = $(select);
pattern.push(select.value);
el.change(function() {
pattern[i] = select.value;
trs.hide().filter(function(i, tr) {
var data = $(tr).data("filter").split(",");
return pattern.every(function(txt, k) {
return txt == "Все" || txt == data[k]
})
}).show()
})
})
});
</script>
</head>
<body>
<div class="table-filters">
Ячейка предметов 1 <select id="itemslot1-filter">
<option>Все</option>
<option value="Икона">Икона</option>
<option value="Кольцо">Кольцо</option>
<option value="Пояс">Пояс</option>
<option value="Талисман">Талисман</option>
<option value="Темляк">Темляк</option>
<option value="Шея">Шея</option>
</select>
Ячейка предметов 2 <select id="itemslot2-filter">
<option>Все</option>
<option value="Икона">Икона</option>
<option value="Кольцо">Кольцо</option>
<option value="Пояс">Пояс</option>
<option value="Талисман">Талисман</option>
<option value="Темляк">Темляк</option>
<option value="Шея">Шея</option>
</select>
Ячейка предметов 3 <select id="itemslot3-filter">
<option>Все</option>
<option value="Икона">Икона</option>
<option value="Кольцо">Кольцо</option>
<option value="Пояс">Пояс</option>
<option value="Талисман">Талисман</option>
<option value="Темляк">Темляк</option>
<option value="Шея">Шея</option>
</select>
</div>
<table id="filter-table">
<thead>
<tr>
<th>Ячейка предметов 1</th>
<th>Ячейка предметов 2</th>
<th>Ячейка предметов 3</th>
</tr>
</thead>
<tbody>
<tr data-filter="Кольцо,Шея,Пояс">
<td>Кольцо</td>
<td>Шея</td>
<td>Пояс</td>
</tr>
<tr data-filter="Шея,Пояс,Кольцо">
<td>Шея</td>
<td>Пояс</td>
<td>Кольцо</td>
</tr>
<tr data-filter="Темляк,Шея,Кольцо">
<td>Темляк</td>
<td>Шея</td>
<td>Кольцо</td>
</tr>
<tr data-filter="Кольцо,Кольцо,Кольцо">
<td>Кольцо</td>
<td>Кольцо</td>
<td>Кольцо</td>
</tr>
<tr data-filter="Кольцо,Кольцо,Талисман">
<td>Кольцо</td>
<td>Кольцо</td>
<td>Талисман</td>
</tr>
</tbody>
</table>
</body>
</html>
|
рони,
Спасибо, а так не выйдет? Если в дата значения такие "Кольцо,Кольцо,Талисман", а селекторами выбираю "Талисман, Кольцо,Кольцо" и найти эти значения в дата. В селекторе "Талисман" первый, а в дата он третий. |
Anonket,
выйдет. |
Anonket,
проверьте!
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
var pattern = [],
trs = $("#filter-table tbody tr");
$(".table-filters select").each(function(i, select) {
var el = $(select);
pattern.push(select.value);
el.change(function() {
pattern[i] = select.value;
trs.hide().filter(function(i, tr) {
var data = $(tr).data("filter").split(",");
var arr = pattern.slice(0);
data.forEach(function(a) {
var i = arr.indexOf(a);
if(i != -1) arr.splice(i,1);
})
return arr.every(function(txt, k) {
return txt == "Все"
})
}).show()
})
})
});
</script>
</head>
<body>
<div class="table-filters">
Ячейка предметов 1 <select id="itemslot1-filter">
<option>Все</option>
<option value="Икона">Икона</option>
<option value="Кольцо">Кольцо</option>
<option value="Пояс">Пояс</option>
<option value="Талисман">Талисман</option>
<option value="Темляк">Темляк</option>
<option value="Шея">Шея</option>
</select>
Ячейка предметов 2 <select id="itemslot2-filter">
<option>Все</option>
<option value="Икона">Икона</option>
<option value="Кольцо">Кольцо</option>
<option value="Пояс">Пояс</option>
<option value="Талисман">Талисман</option>
<option value="Темляк">Темляк</option>
<option value="Шея">Шея</option>
</select>
Ячейка предметов 3 <select id="itemslot3-filter">
<option>Все</option>
<option value="Икона">Икона</option>
<option value="Кольцо">Кольцо</option>
<option value="Пояс">Пояс</option>
<option value="Талисман">Талисман</option>
<option value="Темляк">Темляк</option>
<option value="Шея">Шея</option>
</select>
</div>
<table id="filter-table">
<thead>
<tr>
<th>Ячейка предметов 1</th>
<th>Ячейка предметов 2</th>
<th>Ячейка предметов 3</th>
</tr>
</thead>
<tbody>
<tr data-filter="Кольцо,Шея,Пояс">
<td>Кольцо</td>
<td>Шея</td>
<td>Пояс</td>
</tr>
<tr data-filter="Шея,Пояс,Кольцо">
<td>Шея</td>
<td>Пояс</td>
<td>Кольцо</td>
</tr>
<tr data-filter="Темляк,Шея,Кольцо">
<td>Темляк</td>
<td>Шея</td>
<td>Кольцо</td>
</tr>
<tr data-filter="Кольцо,Кольцо,Кольцо">
<td>Кольцо</td>
<td>Кольцо</td>
<td>Кольцо</td>
</tr>
<tr data-filter="Кольцо,Кольцо,Талисман">
<td>Кольцо</td>
<td>Кольцо</td>
<td>Талисман</td>
</tr>
</tbody>
</table>
</body>
</html>
|
рони,
Отлично! Это то, что нужно было. Спасибо! |
| Часовой пояс GMT +3, время: 11:53. |