Показать сообщение отдельно
  #1 (permalink)  
Старый 25.11.2018, 00:28
Новичок на форуме
Отправить личное сообщение для Anonket Посмотреть профиль Найти все сообщения от Anonket
 
Регистрация: 24.11.2018
Сообщений: 7

Фильтр таблицы по классу
Возможно ли создать фильтр, чтобы искал несколько значений в классе.

Например: 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, 25.11.2018 в 10:21. Причина: добавил data-filter
Ответить с цитированием