Форум

Anonket · #11 (**permalink**) 28.11.2018, 21:44

рони,
Привет, а можно еще сделать такой код через совпадения 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) {

рони · #12 (**permalink**) 28.11.2018, 23:19

Сообщение от 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>

Anonket · #13 (**permalink**) 29.11.2018, 00:11

рони,
Спасибо.

Форум

Справочник

Discord чат

Курсы javascript