Показать сообщение отдельно
  #6 (permalink)  
Старый 25.11.2018, 11:03
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

фильтрация строк таблицы
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>
Ответить с цитированием