Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 16.02.2016, 20:34
Аспирант
Отправить личное сообщение для alexmixaylov Посмотреть профиль Найти все сообщения от alexmixaylov
 
Регистрация: 14.09.2013
Сообщений: 70

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

значения некоторых ячеек выношу в атрибуты строк
нужно чтобы показывались.скрывались строки, у которых соответствуют все атрибуты заданным условиям
//получаем всю таблицу
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
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

alexmixaylov,
атрибуты в data формате можно сделать?
Ответить с цитированием
  #3 (permalink)  
Старый 16.02.2016, 20:40
Аспирант
Отправить личное сообщение для alexmixaylov Посмотреть профиль Найти все сообщения от alexmixaylov
 
Регистрация: 14.09.2013
Сообщений: 70

Сообщение от рони Посмотреть сообщение
alexmixaylov,
атрибуты в data формате можно сделать?
да, ограничений нет
Ответить с цитированием
  #4 (permalink)  
Старый 16.02.2016, 20:47
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

alexmixaylov,
тогда ещё что у вас источник данных для фильтра - html и что делать со строками в которых нет искомого?
Ответить с цитированием
  #5 (permalink)  
Старый 16.02.2016, 20:53
Аспирант
Отправить личное сообщение для alexmixaylov Посмотреть профиль Найти все сообщения от alexmixaylov
 
Регистрация: 14.09.2013
Сообщений: 70

средствами 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
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

alexmixaylov,
ок
Ответить с цитированием
  #7 (permalink)  
Старый 16.02.2016, 22:04
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

alexmixaylov,
несколько строк поразнообразнее не подкините ?
Ответить с цитированием
  #8 (permalink)  
Старый 16.02.2016, 22:14
Аспирант
Отправить личное сообщение для alexmixaylov Посмотреть профиль Найти все сообщения от alexmixaylov
 
Регистрация: 14.09.2013
Сообщений: 70

<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
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Фильтрация строк таблицы по data
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>

Последний раз редактировалось рони, 16.02.2016 в 23:58.
Ответить с цитированием
  #10 (permalink)  
Старый 16.02.2016, 23:38
Аспирант
Отправить личное сообщение для alexmixaylov Посмотреть профиль Найти все сообщения от alexmixaylov
 
Регистрация: 14.09.2013
Сообщений: 70

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

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



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как проверить на совпадение первых 3 чисел в инпуте ? Валерий1996 Общие вопросы Javascript 7 27.08.2015 12:23
Как проверить содержимое data() на пустоту? xmlns jQuery 6 22.05.2014 18:24
Поиск в массиве, частичное совпадение фонарик Общие вопросы Javascript 25 04.04.2013 07:43
Как проверить два обьекта на совпадение? abc_ua jQuery 2 16.03.2011 08:40
Как проверить существование функции Aderba Общие вопросы Javascript 2 14.11.2008 16:09