Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #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
Ответить с цитированием
  #2 (permalink)  
Старый 25.11.2018, 01:01
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Anonket,
так можно сделать?
<tr data-filter="Кольцо,Шея,Пояс">
            <td>Кольцо</td>
            <td>Шея</td>
            <td>Пояс</td>
        </tr>
Ответить с цитированием
  #3 (permalink)  
Старый 25.11.2018, 09:49
Новичок на форуме
Отправить личное сообщение для Anonket Посмотреть профиль Найти все сообщения от Anonket
 
Регистрация: 24.11.2018
Сообщений: 7

Сообщение от рони Посмотреть сообщение
Anonket,
так можно сделать?
<tr data-filter="Кольцо,Шея,Пояс">
            <td>Кольцо</td>
            <td>Шея</td>
            <td>Пояс</td>
        </tr>
Да.
Ответить с цитированием
  #4 (permalink)  
Старый 25.11.2018, 10:06
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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

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

фильтрация строк таблицы
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>
Ответить с цитированием
  #7 (permalink)  
Старый 25.11.2018, 11:37
Новичок на форуме
Отправить личное сообщение для Anonket Посмотреть профиль Найти все сообщения от Anonket
 
Регистрация: 24.11.2018
Сообщений: 7

рони,
Спасибо, а так не выйдет? Если в дата значения такие "Кольцо,Кольцо,Талисман", а селекторами выбираю "Талисман, Кольцо,Кольцо" и найти эти значения в дата. В селекторе "Талисман" первый, а в дата он третий.

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

Anonket,
выйдет.
Ответить с цитированием
  #9 (permalink)  
Старый 25.11.2018, 12:11
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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>
Ответить с цитированием
  #10 (permalink)  
Старый 25.11.2018, 12:17
Новичок на форуме
Отправить личное сообщение для Anonket Посмотреть профиль Найти все сообщения от Anonket
 
Регистрация: 24.11.2018
Сообщений: 7

рони,
Отлично! Это то, что нужно было. Спасибо!
Ответить с цитированием
Ответ


Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Фильтр таблицы HTML sashgera Элементы интерфейса 13 04.02.2018 17:43
фильтр для 60ти полей таблицы skrudjmakdak Элементы интерфейса 3 12.06.2014 10:03
Фильтр для таблицы через select-ты! Hedkost jQuery 1 25.02.2014 16:39
Помогите преобразовать фильтр таблицы под select greencard jQuery 2 21.08.2013 12:36
Фильтр таблицы с rowspan sigvart Элементы интерфейса 7 09.06.2012 16:59