|
Сообщение от Anonket
|
|
Если совпадений нету, добавить строку "Не найдено.".
|
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
tbody tr:last-child{
text-align: center;
background-color: #FFFACD;
display: none;
}
tbody.no-results tr:last-child{
display: table-row;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
var pattern = [],
tbody = $("#filter-table tbody"),
trs = $("[data-filter]", tbody);
$(".table-filters select").each(function(i, select) {
var el = $(select);
pattern.push(select.value);
el.change(function() {
pattern[i] = select.value;
var rows = 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();
tbody.toggleClass("no-results", !rows.length )
})
})
});
</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>
<tr>
<td colspan="3">Не найдено.</td>
</tr>
</tbody>
</table>
</body>
</html>