Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 03.11.2014, 02:48
Кандидат Javascript-наук
Отправить личное сообщение для sashgera Посмотреть профиль Найти все сообщения от sashgera
 
Регистрация: 20.09.2011
Сообщений: 140

Фильтр таблицы HTML
Здравствуйте
Есть таблица с двумя селектами, при выборе которых происходит фильтрация (скрытие строк)
Как можно сделать фильтрацию взаимосвязанной?
Например, если отфильтровать строки в одном из столбцов, как-то сохранить результат, а из оставшихся строк сделать выборку по другому столбцу
пример: http://www.glass-pgc.ru/UntitledKM.html
<script type="text/javascript">
//фильтрация по 1 столбцу
   	function filter1 (phrase, _id){
		var words = phrase.value.toLowerCase().split(" "); 
		var table = document.getElementById(_id); 
		for (var r = 1; r < table.rows.length; r++){ //сколько строк сверху не фильтровать
			var cellsV = table.rows[r].cells[0].innerHTML.replace(/<[^>]+>/g,""); // 1 столбец для фильтрации
			var cellsV = [cellsV].join(" "); 
		    var displayStyle = 'none';
		    for (var i = 0; i < words.length; i++) {
			if (cellsV.toLowerCase().indexOf(words[i])>=0)
				displayStyle = ''; 
			else {
				displayStyle = 'none'; 
				break;
			}
			}
		table.rows[r].style.display = displayStyle; 
		}
	}
	
//фильтрация по 2 столбцу
	function filter11 (phrase, _id){
		var words = phrase.value.toLowerCase().split(" "); 
		var table = document.getElementById(_id); 
		for (var r = 1; r < table.rows.length; r++){ //сколько строк сверху не фильтровать
			var cellsV = table.rows[r].cells[1].innerHTML.replace(/<[^>]+>/g,""); // 2 столбец для фильтрации
			var cellsV = [cellsV].join(" "); 
		    var displayStyle = 'none';
		    for (var i = 0; i < words.length; i++) {
			if (cellsV.toLowerCase().indexOf(words[i])>=0)
				displayStyle = ''; 
			else {
				displayStyle = 'none'; 
				break;
			}
			}
		table.rows[r].style.display = displayStyle; 
		}
	}
  </script>

<table id="sf" style="width: 400px;" border="1" cellpadding="0" cellspacing="0">
  <tr>
    <td><select name="filt" onchange="filter1(this, 'sf'); this.options[0].selected = true; ">
<option value="">-- Выбрать --</option>
<option value="">Все наименования</option> 
<option value="зеленый">зеленый</option> 
<option value="красный">красный</option> 
</select> </td>
    <td><select name="filt" onchange="filter11(this, 'sf'); this.options[0].selected = true; ">
<option value="">-- Выбрать --</option>
<option value="">Все наименования</option> 
<option value="да">да</option> 
<option value="нет">нет</option> 
</select></td>
  </tr>
  <tr>
    <td>зеленый 1</td>
    <td>да</td>
  </tr>
  <tr>
    <td>зеленый 2</td>
    <td>нет</td>
  </tr>
  <tr>
    <td>красный 1</td>
    <td>нет</td>
  </tr>
  <tr>
    <td>красный 2</td>
    <td>да</td>
  </tr>
</table>
Ответить с цитированием
  #2 (permalink)  
Старый 03.11.2014, 03:12
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

sashgera,
если ненужно возврата по второй сортировке
то можно добавить в строку 27
if(table.rows[r].style.display == 'none' )  continue;
Ответить с цитированием
  #3 (permalink)  
Старый 03.11.2014, 03:25
Кандидат Javascript-наук
Отправить личное сообщение для sashgera Посмотреть профиль Найти все сообщения от sashgera
 
Регистрация: 20.09.2011
Сообщений: 140

рони,
спасибо, но возврат нужен и по первой и по второй сортировке
Ответить с цитированием
  #4 (permalink)  
Старый 03.11.2014, 11:50
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

Зависимая фильтрация строк в таблице
sashgera,
... можно добавлять столбцы с такойже структурой - в первой ячейке должен быть селектор.
<!DOCTYPE HTML>

<html>

<head>
    <title>Untitled</title>
    <meta charset="utf-8">

</head>

<body>

    <table id="sf" style="width: 400px;" border="1" cellpadding="0" cellspacing="0">
        <tr>
            <td>
                <select>
                    <option value="">-- Выбрать --</option>
                    <option value="">Все наименования</option>
                    <option value="зеленый">зеленый</option>
                    <option value="красный">красный</option>
                </select>
            </td>
            <td>
                <select>
                    <option value="">-- Выбрать --</option>
                    <option value="">Все наименования</option>
                    <option value="да">да</option>
                    <option value="нет">нет</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>зеленый 1</td>
            <td>да</td>
        </tr>
        <tr>
            <td>зеленый 2</td>
            <td>нет</td>
        </tr>
        <tr>
            <td>красный 1</td>
            <td>нет</td>
        </tr>
        <tr>
            <td>красный 2</td>
            <td>да</td>
        </tr>
    </table>
    <input type="button" value="reset" class="res"/>
    <p>Как можно сделать: если отфильтровать строки в одном из столбцов, как-то сохранить результат, а из оставшихся строк сделать выборку по другому столбцу </p>
    <p>например, выбираем в первом столбце ЗЕЛЕНЫЙ, во втором ДА, и в результате остается одна строка - зеленый 1 да </p>
    <table border="1" cellpadding="0" cellspacing="0" id="sf2" style="width: 400px;">
        <tr>
            <td>зеленый 1</td>
            <td>да</td>
        </tr>
    </table>
    <script>
        window.onload = function() {
            var tab = document.querySelector('#sf'),
                tr = tab.querySelectorAll('tr:nth-child(n+2)'),
                sel = tab.querySelectorAll('select'),
                arr = [],
                res = document.querySelector('.res');
            Array.prototype.forEach.call(sel, function(a, b) {
                arr[b] = a.value;
                a.onchange = function() {
                    arr[b] = a.value;
                    a.options[0].selected = !0;
                    Array.prototype.forEach.call(tr, function(a, b) {
                        var c = Array.prototype.every.call(a.querySelectorAll("td"), function(a, b) {
                            return RegExp(arr[b]).test(a.textContent)
                        });
                        a.style.display = c ? "" : "none"
                    })
                }
            });
           res.onclick =  function() {
                for (var i=0; i<sel.length; i++)  {sel[i].onchange()}               }
        }
    </script>
</body>

</html>

Последний раз редактировалось рони, 04.11.2014 в 15:57.
Ответить с цитированием
  #5 (permalink)  
Старый 03.11.2014, 12:48
Кандидат Javascript-наук
Отправить личное сообщение для sashgera Посмотреть профиль Найти все сообщения от sashgera
 
Регистрация: 20.09.2011
Сообщений: 140

рони,
большое спасибо! Все отлично работает. Теперь буду думать как динамически изменять option в селектах, на форуме где-то видел такую тему
Ответить с цитированием
  #6 (permalink)  
Старый 04.11.2014, 15:39
Кандидат Javascript-наук
Отправить личное сообщение для sashgera Посмотреть профиль Найти все сообщения от sashgera
 
Регистрация: 20.09.2011
Сообщений: 140

рони, не хватает знаний, пожалуйста, если можно - как сделать сброс таблицы в начальное состояние, нажатием кнопки - показать все скрытые javascript строки, пробовал так:
<input type="button" value="reset" onclick="filter_table();" />

<script>
        window.onload = function filter_table() {
            var tab = document.querySelector('#sf'),
                tr = tab.querySelectorAll('tr:nth-child(n+2)'),
                sel = tab.querySelectorAll('select'),
                arr = [];
            Array.prototype.forEach.call(sel, function(a, b) {
                arr[b] = a.value;
                a.onchange = function() {
                    arr[b] = a.value;
                    a.options[0].selected = !0;
                    Array.prototype.forEach.call(tr, function(a, b) {
                        var c = Array.prototype.every.call(a.querySelectorAll("td"), function(a, b) {
                            return RegExp(arr[b]).test(a.textContent)
                        });
                        if(a.style.display = c ? "" : 'none') { //сброс таблицы в начальное состояние, нажатием кнопки - показать все скрытые js строки
                        a.style.display = c ? "" : 'none';
                        }
                        else {
                       a.style.display = c ? "" : '';
                           }
                    })
                }
            });
        }
		
    </script>
Ответить с цитированием
  #7 (permalink)  
Старый 04.11.2014, 15:45
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

sashgera,
напишите отдельно функцию для вашей кнопки -- в которой циклом обходтся переменная tr -- и назначается
a.style.display = '';
Ответить с цитированием
  #8 (permalink)  
Старый 04.11.2014, 15:52
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

sashgera,
вам сюда http://learn.javascript.ru/
кнопка добавлена, смотрите пост 4
Ответить с цитированием
  #9 (permalink)  
Старый 04.11.2014, 16:19
Кандидат Javascript-наук
Отправить личное сообщение для sashgera Посмотреть профиль Найти все сообщения от sashgera
 
Регистрация: 20.09.2011
Сообщений: 140

рони, большое спасибо!
Ответить с цитированием
  #10 (permalink)  
Старый 08.04.2015, 16:14
Новичок на форуме
Отправить личное сообщение для bdb2000 Посмотреть профиль Найти все сообщения от bdb2000
 
Регистрация: 08.04.2015
Сообщений: 3

рони, великолепный код. К сожалению не хватает знаний чуть доработать его самостоятельно. Нет ли возможности сделать, чтобы после выбора в Selectах выбранные значения оставались (не сбрасывались на "Выборка") или эти значения выводились для памяти в столбцах выше/ниже или где-то над таблицей писался список условий. А то пользователи "забывают", что они уже нажимали и могут нажать взаимоисключающие выборы. Смешные они...
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
фильтр для 60ти полей таблицы skrudjmakdak Элементы интерфейса 3 12.06.2014 10:03
Фильтр для таблицы через select-ты! Hedkost jQuery 1 25.02.2014 16:39
Помогите преобразовать фильтр таблицы под select greencard jQuery 2 21.08.2013 12:36
Фильтр таблицы с rowspan sigvart Элементы интерфейса 7 09.06.2012 16:59
Конвертация txt таблицы в html gaiver Общие вопросы Javascript 95 09.03.2009 22:19