Javascript.RU

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

рони,
Привет, а можно еще сделать такой код через совпадения select и data. Если совпадений нету, добавить строку "Не найдено.".

var $table = $('.wikitable'),
    $colLength = $table.find('thead th').length,
    $filteredRows = $table.find("tbody tr:visible"),
    $filteredCount = $filteredRows.length;

    $(".no-results").remove();
    if ($filteredCount == 0) {
      $table.find('tbody').append($("<tr />").addClass("no-results").css({
        "text-align": "center"
      }).append($("<td />").attr("colspan", $colLength).html("Не найдено.")));
    }

И еще вопрос. На сайте в хроме скрипт не работает (иногда срабатывает), а в Firefox работает.
Uncaught TypeError: Cannot read property 'split' of undefined

Таблица и селекторы указаны.
$(function () {
  var pattern = [],
      $trs = $(".wikitable tbody tr");
  $("#table-filters select").each(function (i, select) {

Последний раз редактировалось Anonket, 28.11.2018 в 22:16.
Ответить с цитированием
  #12 (permalink)  
Старый 28.11.2018, 23:19
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,068

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