Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 04.02.2018, 18:53
Аспирант
Отправить личное сообщение для Anushki Посмотреть профиль Найти все сообщения от Anushki
 
Регистрация: 07.11.2017
Сообщений: 43

Фильтрация таблицы по селектам
Всем привет. Подскажите как настроить фильтрацию чтобы они были привязаны к определенным tr и td. И были связанны между собой.

Например: Москва, гражданское право - должно отображать все компании по москве которые ведут дела по гражданскому праву.

<!DOCTYPE html>
<html>
<head>
<title>Фильтрация по Select'ам</title>
</head>

<body>
<table>
<thead>
<tr>
<th>Название организации</th>
<th>
<select id="a">
<option value="" selected disabled>- Выберите город -</option>
<option value="a1">Москва</option>
<option value="a2">Питер</option>
</select>
</th>
<th>
<select id="b">
<option value="" selected disabled>- Области права -</option>
<option value="b1">Гражданское право</option>
<option value="b2">Уголовное право</option>
</select>
</th>
</tr>
</thead>
<tbody id="target">
<tr>
<td>Компания 1</td>
<td name="a1">Москва</td>
<td name="b1">Гражданское право</td>
</tr>
<tr>
<td>Компания 2</td>
<td name="a1">Москва</td>
<td name="b2">Уголовное право</td>
</tr>
<tr>
<td>Компания 3</td>
<td name="a2">Питер</td>
<td name="b1">Гражданское право</td>
</tr>
<tr>
<td>Компания 4</td>
<td name="a2">Питер</td>
<td name="b2">Уголовное право</td>
</tr>
</tbody>
</table>

<script>

</script>
</body>
</html>
Ответить с цитированием
  #2 (permalink)  
Старый 04.02.2018, 19:49
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

<!DOCTYPE html>
<html>
<head>
<title>Фильтрация по Select'ам</title>
</head>

<body>
<table>
<thead>
<tr>
<th>Название организации</th>
<th>
<select id="a">
<option value="" selected disabled>- Выберите город -</option>
<option value="a1">Москва</option>
<option value="a2">Питер</option>
</select>
</th>
<th>
<select id="b">
<option value="" selected disabled>- Области права -</option>
<option value="b1">Гражданское право</option>
<option value="b2">Уголовное право</option>
</select>
</th>
</tr>
</thead>
<tbody id="target">
<tr>
<td>Компания 1</td>
<td name="a1">Москва</td>
<td name="b1">Гражданское право</td>
</tr>
<tr>
<td>Компания 2</td>
<td name="a1">Москва</td>
<td name="b2">Уголовное право</td>
</tr>
<tr>
<td>Компания 3</td>
<td name="a2">Питер</td>
<td name="b1">Гражданское право</td>
</tr>
<tr>
<td>Компания 4</td>
<td name="a2">Питер</td>
<td name="b2">Уголовное право</td>
</tr>
</tbody>
</table>
<script>

var tr = document.querySelectorAll('#target tr'),
sel = document.querySelectorAll('select');
sel.forEach(el=>el.onclick=e=>tr.forEach(el=>el.style.display = (el.textContent.includes(sel[0].options[sel[0].selectedIndex].textContent) || sel[0].selectedIndex==0) && (el.textContent.includes(sel[1].options[sel[1].selectedIndex].textContent) || sel[1].selectedIndex==0)?'table-row':'none'));

</script>
</body>
</html>
Ответить с цитированием
  #3 (permalink)  
Старый 04.02.2018, 19:54
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

фильтрация строк таблицы
Anushki,

другие варианты по ссылкам (добавлен параметр исключения колонок из фильтрации )
https://javascript.ru/forum/showthread.php?p=306236
https://javascript.ru/forum/misc/522...tml#post345974

<!DOCTYPE HTML>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  body{height:1000px;background:#FF8C00;font-family:Georgia,"Times New Roman",Times,serif;letter-spacing:1px}
  .zebra select{margin:0px auto;width:100%;background:#CCC;color:#FFF}
  .zebra select option {color: #ff0;background: #000;}
  .zebra select option:nth-of-type(1) {color: #FFFFFF;background: #000;}
  .zebra td{border:1px solid #555555;color:#FFF;padding:5px;text-align:left;background:#000}
  .zebra tr:nth-child(2n) td{background:#383838}
  .zebra thead td:hover{background-image:-webkit-gradient(linear,top,bottom,color-stop(0,#E6E6FA),color-stop(1,#696969));background-image:-ms-linear-gradient(top,#E6E6FA,#696969);background-image:-o-linear-gradient(top,#E6E6FA,#696969);background-image:-moz-linear-gradient(top,#E6E6FA,#696969);background:-webkit-linear-gradient(top,#E6E6FA,#696969);background:linear-gradient(to bottom,#E6E6FA,#696969)}
  .zebra thead tr td{padding:5px;font-weight:bold;background-image:-webkit-gradient(linear,top,bottom,color-stop(0,#000000),color-stop(1,#CCCCCC));background-image:-o-linear-gradient(top,#000000,#CCCCCC);background-image:-moz-linear-gradient(top,#000000,#CCCCCC);background-image:-webkit-linear-gradient(top,#000000,#CCCCCC);background:linear-gradient(to bottom,#000000,#CCCCCC)}
  .zebra tbody tr:hover td{background-image:-webkit-gradient(linear,left,right,color-stop(0,#D2691E),color-stop(1,#DEB887));background-image:-ms-linear-gradient(left,#D2691E,#DEB887);background-image:-o-linear-gradient(left,#D2691E,#DEB887);background-image:-moz-linear-gradient(left,#D2691E,#DEB887);background:-webkit-linear-gradient(left,#D2691E,#DEB887);background:linear-gradient(to right,#D2691E,#DEB887)}
  table.zebra{border-collapse:collapse;border-spacing:0;box-shadow:0 2px 1px 5px rgba(242,242,242,0.1);width:700px;margin:0px auto}
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  <script>
$(function () {
    $("table").tablework();
});
$.fn.tablework = function() {
    return this.each(function() {
        var $table = $(this),
            $trs = $table.find("tbody tr"),
            $thead = $table.find('thead');
        $thead.length || ($thead = $('<thead/>').prependTo($table));
        var $tr = $('<tr/>').prependTo($thead),
            hide = {};
        $("td", $trs.first()).each(function(indx, element) {
            var options = [$('<option/>', {
                    'text': 'Без выбора'
                })],
                $td = $trs.find(":nth-child(" + (indx + 1) + ")"),
                temp = {};
            $td.each(function(i, el) {
                var text = $(el).text();
                temp[text] || (
                    options.push($('<option/>', {
                        'text': text
                    })),
                    temp[text] = true
                );
            });
            var $select = $('<select/>', {
                multiple: "multiple",
                html: options,
                'change': function() {
                    var val = $(this).val() || [];
                    hide[indx] = [];
                    this.selectedIndex && $td.each(function(i, el) {
                        $.inArray($(el).text(), val) == -1 && hide[indx].push($trs[i])
                    });
                    var trs = [];
                    for (var k in hide) $.merge(trs, hide[k]);
                    $.unique(trs);
                    $trs.show();
                    $(trs).hide()

                }

            });
            $('<td/>').append($select).appendTo($tr);
        });

    });
};
</script>
</head>
<body>
<br>
<table class="zebra" >
<tbody id="target">
<tr>
<td>Компания 1</td>
<td name="a1">Москва</td>
<td name="b1">Гражданское право</td>
</tr>
<tr>
<td>Компания 2</td>
<td name="a1">Москва</td>
<td name="b2">Уголовное право</td>
</tr>
<tr>
<td>Компания 3</td>
<td name="a2">Питер</td>
<td name="b1">Гражданское право</td>
</tr>
<tr>
<td>Компания 4</td>
<td name="a2">Питер</td>
<td name="b2">Уголовное право</td>
</tr>
</tbody>
	</table>

</body>
</html>

Последний раз редактировалось рони, 04.02.2018 в 20:04.
Ответить с цитированием
  #4 (permalink)  
Старый 04.02.2018, 20:08
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

рони,
Куя се ты заморочился
Ответить с цитированием
  #5 (permalink)  
Старый 04.02.2018, 20:18
Аспирант
Отправить личное сообщение для Anushki Посмотреть профиль Найти все сообщения от Anushki
 
Регистрация: 07.11.2017
Сообщений: 43

Первый вариант проще.. к тому же если использовать второй вариант то нет возможности выводить дополнительные столбцы вне фильтрации.. например название компании
Ответить с цитированием
  #6 (permalink)  
Старый 04.02.2018, 20:19
Аспирант
Отправить личное сообщение для Anushki Посмотреть профиль Найти все сообщения от Anushki
 
Регистрация: 07.11.2017
Сообщений: 43

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

Сообщение от Anushki
к тому же если использовать второй вариант то нет возможности выводить дополнительные столбцы вне фильтрации..
о чём это вы?
Ответить с цитированием
  #8 (permalink)  
Старый 05.02.2018, 06:29
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Сообщение от рони
другие варианты
А можно и не тасовать ячейки таблицы. При первом запросе к сортировке получить значения ячеек в объект, ключами которого являются индексы колонок, а значениями объекты - значения колонки под индексами строк как ключами. Далее сортируем объект выбранной колонки и заменяем значения ячеек таблицы значениями из этого объекта по ключам отсортированного объекта.
Ответить с цитированием
  #9 (permalink)  
Старый 05.02.2018, 11:07
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

laimas,
не понял, но есть вариант где, таблица формируется из обьекта, который начале фильтруется, а на основе отфильтрованного создаются строки, есть и сортировка обьекта, вместо фильтрации, и тоже на основе отсортированного, пересоздание таблицы.
на форуме, искать только надо.
Ответить с цитированием
  #10 (permalink)  
Старый 05.02.2018, 11:19
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Сообщение от рони
не понял
Таблица с колонками A, B, C по которым производится сортировка.

A B C
1 4 7
2 5 8
3 6 9

При запросах, если объект еще не создан, то создается:

obj = {
    'A': {'0': 1, '1': 2, '2': 3},
    'B': {'0': 4, '1': 5, '2': 6},
    'C': {'0': 7, '1': 8, '2': 9}
}


Если выбрана сортировка по колонке B, то сортируется копия объекта В, а таблица заполняется данными взятыми из объекта по ключам отсортированной копии. Например после сортировки получится так - {'2': 6, '0': 4, '1': 5}, значит таблица будет заполнена:

1 строка - значения объектов под ключами 2
2 строка - значения объектов под ключами 0
3 строка - значения объектов под ключами 1
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
элементарный скрипт: фильтрация таблицы louboutin Элементы интерфейса 5 27.04.2016 17:51
Фильтрация встроенной таблицы при помощи greasemonkey totoster Общие вопросы Javascript 0 24.04.2015 14:40
фильтрация .csv таблицы br1ck Элементы интерфейса 0 13.11.2013 08:35
Фильтрация таблицы Tmin10 jQuery 1 06.09.2012 12:16
Двойная Фильтрация данных таблицы David0707 Общие вопросы Javascript 0 19.03.2012 13:00