проверить на совпадение нескольких атрибутов
хочу сделать таблице фильтр результатов
значения некоторых ячеек выношу в атрибуты строк нужно чтобы показывались.скрывались строки, у которых соответствуют все атрибуты заданным условиям
//получаем всю таблицу
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>
теперь нужно отфильтровать строки у которых совпадают все атрибуты как отфильтровать по одному значению я знаю а вот как отфильтровать несколько значений одновременно чтобы все существующие атрибуты учитывались здесь вопрос |
alexmixaylov,
атрибуты в data формате можно сделать? |
Цитата:
|
alexmixaylov,
тогда ещё что у вас источник данных для фильтра - html и что делать со строками в которых нет искомого? |
средствами 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);
});
те строки в которых встречаются совпадения - показываются, остальные скрываются |
alexmixaylov,
ок |
alexmixaylov,
несколько строк поразнообразнее не подкините ?:) |
<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>
такое? я вручную добавил атрибуты |
Фильтрация строк таблицы по 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>
|
Снимаю шляпу, Профессор
просто прекрасно я переделал присваивание атрибутов на PHP пусть сервер трудится теперь строки сразу выводятся с атрибутами скрипт работает прекрасно, но к сожалению мой разум не в силах охватить всю красоту этого решения :) |
| Часовой пояс GMT +3, время: 10:45. |