Форум

alexmixaylov · #1 (**permalink**) 16.02.2016, 20:34

хочу сделать таблице фильтр результатов

значения некоторых ячеек выношу в атрибуты строк
нужно чтобы показывались.скрывались строки, у которых соответствуют все атрибуты заданным условиям

//получаем всю таблицу
var getTable = $('table tbody tr');

//создаем обект с атрибутами
var attrObj = new Object();

//функция добавления атрибута
function addAttr(eachClass, word) {
     $(getTable).children('.' + eachClass).each(function () {
     if ($.trim($(this).text()) == word) {
        //если есть совпадение добавляем атрибут строке
        $(this).parent().attr(eachClass, word);
     }
});
}

вывод в консоли

Object {city: "Таллинн", type: "Групповая"}

html код с добавленными атрибутами

<tr class="table-row item_1895" city="Таллинн" type="Групповая">
    <td class="city">Таллинн</td>
    <td class="type">Групповая</td>
 </tr>
<tr class="table-row item_1895" city="Рига" type="Групповая">
    <td class="city">Рига</td>
    <td class="type">Групповая</td>
 </tr>

теперь нужно отфильтровать строки у которых совпадают все атрибуты
как отфильтровать по одному значению я знаю

а вот как отфильтровать несколько значений одновременно
чтобы все существующие атрибуты учитывались
здесь вопрос

рони · #2 (**permalink**) 16.02.2016, 20:38

alexmixaylov,
атрибуты в data формате можно сделать?

alexmixaylov · #3 (**permalink**) 16.02.2016, 20:40

Сообщение от рони

alexmixaylov,
атрибуты в data формате можно сделать?

да, ограничений нет

рони · #4 (**permalink**) 16.02.2016, 20:47

alexmixaylov,
тогда ещё что у вас источник данных для фильтра - html и что делать со строками в которых нет искомого?

alexmixaylov · #5 (**permalink**) 16.02.2016, 20:53

средствами php выводится таблица (до сотни строк 5ячеек)

есть несколько селектов, в которые выведены и уникализированы значения ячеек
при изменение селекта добавляю значение в объект

//при изменении селекта
            $('select').change(function () {
                var getClass = this.id;
                var getOptions = $.trim($(this).val());
                //добавляем атрибуты в объект
                attrObj[getClass] = getOptions;
                //добавляем атрибуты строкам
                addAttr(getClass, getOptions);
                console.log(attrObj);
                //скрываем показываем строки
                hideTr(attrObj);
            });

те строки в которых встречаются совпадения - показываются, остальные скрываются

рони · #6 (**permalink**) 16.02.2016, 20:56

alexmixaylov,
ок

рони · #7 (**permalink**) 16.02.2016, 22:04

alexmixaylov,
несколько строк поразнообразнее не подкините ?

alexmixaylov · #8 (**permalink**) 16.02.2016, 22:14

<table>
    <tbody>
        <tr class="table-row item_1657" data-city="Копенгаген" data-type_e="Групповая экскурсия">
            <td class="type_e">Групповая экскурсия</td>
            <td class="city">Копенгаген</td>
        </tr>
        <tr class="table-row item_1658" data-city="Копенгаген" data-type_e="Групповая экскурсия">
            <td class="type_e">Групповая экскурсия</td>
            <td class="city">Копенгаген</td>
        </tr>
        <tr class="table-row item_1659" data-city="Хиллеред" data-type_e="Индивидуальная экскурсия">
            <td class="type_e">Индивидуальная экскурсия</td>
            <td class="city">Хиллеред</td>
        </tr>
        <tr class="table-row item_1660" data-city="Копенгаген" data-type_e="Индивидуальная экскурсия">
            <td class="type_e">Индивидуальная экскурсия</td>
            <td class="city">Копенгаген</td>
        </tr>
        <tr class="table-row item_1661" data-city="Роскильде" data-type_e="Индивидуальная экскурсия">
            <td class="type_e">Индивидуальная экскурсия</td>
            <td class="city">Роскильде</td>
        </tr>
        <tr class="table-row item_1662" data-city="Копенгаген" data-type_e="Индивидуальная экскурсия">
            <td class="type_e">Индивидуальная экскурсия</td>
            <td class="city">Копенгаген</td>
        </tr>
    </tbody>
</table>

такое?

я вручную добавил атрибуты

рони · #9 (**permalink**) 16.02.2016, 22:24

alexmixaylov,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
      tr.hide{
   opacity: .2;
 }
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script>
$(function() {
    function fn() {
        $tr.forEach(function(a, e) {
            selects.every(function(a, c) {
                return !a.value || !!~obj.data[e].indexOf(a.value)
            }) ? $(a).removeClass("hide") : $(a).addClass("hide")
        })
    }
    var obj = {
            select: {},
            data: []
        },
        $tr = $.map($("table tbody tr"), function(tr, i) {
            var data = $(tr).data();
                Object.keys(data).forEach(function(key) {
                if (!obj.select[key]) obj.select[key] = {};
                if (!obj.data[i]) obj.data[i] = [];
                obj.select[key][data[key]] = true;
                obj.data[i].push(data[key])
            });
            return tr
        }),
        selects = $.map(Object.keys(obj.select).sort(),
        function(s) {
            var sel = $("<select/>", {
                name: s,
                change: fn
            }).prependTo("body");
            var opt = Object.keys(obj.select[s]).sort();
            opt.unshift("");
            $.each(opt, function(indx, item) {
                $("<option/>", {
                    text: item,
                    value: item
                }).appendTo(sel)
            });
            return sel[0]
        })
});
  </script>
</head>

<body>
<table>
    <tbody>
        <tr class="table-row item_1657" data-city="Копенгаген" data-type_e="Групповая экскурсия">
            <td class="type_e">Групповая экскурсия</td>
            <td class="city">Копенгаген</td>
        </tr>
        <tr class="table-row item_1658" data-city="Копенгаген" data-type_e="Групповая экскурсия">
            <td class="type_e">Групповая экскурсия</td>
            <td class="city">Копенгаген</td>
        </tr>
        <tr class="table-row item_1659" data-city="Хиллеред" data-type_e="Индивидуальная экскурсия">
            <td class="type_e">Индивидуальная экскурсия</td>
            <td class="city">Хиллеред</td>
        </tr>
        <tr class="table-row item_1660" data-city="Копенгаген" data-type_e="Индивидуальная экскурсия">
            <td class="type_e">Индивидуальная экскурсия</td>
            <td class="city">Копенгаген</td>
        </tr>
        <tr class="table-row item_1661" data-city="Роскильде" data-type_e="Индивидуальная экскурсия">
            <td class="type_e">Индивидуальная экскурсия</td>
            <td class="city">Роскильде</td>
        </tr>
        <tr class="table-row item_1662" data-city="Копенгаген" data-type_e="Индивидуальная экскурсия">
            <td class="type_e">Индивидуальная экскурсия</td>
            <td class="city">Копенгаген</td>
        </tr>
    </tbody>
</table>

</body>

</html>

alexmixaylov · #10 (**permalink**) 16.02.2016, 23:38

Снимаю шляпу, Профессор
просто прекрасно
я переделал присваивание атрибутов на PHP
пусть сервер трудится
теперь строки сразу выводятся с атрибутами

скрипт работает прекрасно, но к сожалению мой разум не в силах охватить всю красоту этого решения

Форум

Справочник

Discord чат

Курсы javascript