HTML: <div id="names"> <h3>Найдено</h3><br> <div class="name1">name 1</div> <div class="name2">name 2</div> </div> <table> <tr> <td valign="top"> <table id="table" class="tabl"> <tr> <th>Никнейм</th><th>дата</th> </tr> <tr data-id="name1"> <td>name 1</th><td>date 1</th> </tr> <tr data-id="name2"> <td>name 2</th><td>date 2</th> </tr> <tr data-id="name1"> <td>name 1</th><td>date 1</th> </tr> </table> </td> <td valign="top"> <table id="tablem" class="tabl"> <tr> <th>Никнейм</th><th>позиция</th </tr> <tr data-id="name1"> <td>name 1</th><td>position 1</th> </tr> <tr data-id="name2"> <td>name 2</th><td>position 2</th> </tr> <tr data-id="name2"> <td>name 2</th><td>position 2</th> </tr> </table> </td> </tr> </table> Вечер добрый! мне необходима функция фильтра на jquery, задача сделать так чтобы при нажатии на class=name1 - в таблицах оставалась только соответствующиe data-id позиции Прошу учесть что позиции по data-id могут повторятся с меня + разумеется
я кетчуп сегодня забыл купить. Задача такова, вернуться на улицу, пройтись до магазина и купить кетчуп "особо" острый, поможешь ?
я забыл добавить что фильтров может быть много, то есть нажму class=name1 и class=name2 - отображаются только они а class=name3 нет и т.д Я бы мог взять какой либо простой слайдер (функцию), коих много, чутка поправить и родить нечто подобное https://jsfiddle.net/Radioactive/yn80z5q7/, но я не понимаю как сделать множественный выбор, но начало есть!) з.ы в первом посте html кривой, ниже ровный Спойлер: html HTML: <div id="names"> <h3>Найдено</h3><br> <div class="name1">name 1</div> <div class="name2">name 2</div> </div> <table> <tr> <td valign="top"> <table id="table" class="tabl"> <tr> <th>Никнейм</th> <th>дата</th> </tr> <tr class="position" data-id="name1"> <td>name 1</td> <td>date 1</td> </tr> <tr class="position" data-id="name2"> <td>name 2</td> <td>date 2</td> </tr> <tr class="position" data-id="name1"> <td>name 1</td> <td>date 1</td> </tr> </table> </td> <td valign="top"> <table id="tablem" class="tabl"> <tr> <th>Никнейм</th> <th>позиция</th> </tr> <tr class="position" data-id="name1"> <td>name 1</td> <td>position 1</td> </tr> <tr class="position" data-id="name2"> <td>name 2</td> <td>position 2</td> </tr> <tr class="position" data-id="name2"> <td>name 2</td> <td>position 2</td> </tr> </table> </td> </tr> </table>
@radioactive мне кажется ты вообще не понимаешь что у тебя там происходит, вот скажем так шаблон. Две таблицы, когда в поиск вводишь что то, оно отображается в консоле. Так же происходит цикл по таблице. Доделай из него фильт по таблице: HTML: <!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <title>find table </title> </head> <body> <label>Поиск в таблице:</label> <input type="text" class="form-control" id="findIabe"> <table class="table"> <thead class="thead-dark"> <tr> <th scope="col">#</th> <th scope="col">First</th> <th scope="col">Last</th> <th scope="col">Handle</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <th scope="row">2</th> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <th scope="row">3</th> <td>Larry</td> <td>the Bird</td> <td>@twitter</td> </tr> </tbody> </table> <br> <table class="table"> <thead class="thead-light"> <tr> <th scope="col">#</th> <th scope="col">First</th> <th scope="col">Last</th> <th scope="col">Handle</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <th scope="row">2</th> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <th scope="row">3</th> <td>Larry</td> <td>the Bird</td> <td>@twitter</td> </tr> </tbody> </table> <script> var findIabe = document.getElementById('findIabe'), elements = document.querySelectorAll('tr > td'); findIabe.addEventListener('keyup', function() { console.log(this.value); [].forEach.call(elements, function(item){ console.log(item.innerHTML); }) }); </script> </body> </html>
Да мне не поиск элемента надо а множественный выбор элементов или множественный поиск(выбор) жаль я сразу в первом после не указал, прошло более 20 минут как я заметил + js я не знаю а вот с jquery сталкивался уже я нашел подходящий пример http://jsfiddle.net/XPUrt/7/ сейчас сижу тыкаю
Код (Javascript): $(document).ready(function() { $(".series-selector-items > li").click(function() { $(this).toggleClass('selected'); filterItems(); }); }); function filterItems() { var classSelectors = $(".selected").map(function() { return this.id; }).toArray(); if (!classSelectors.length) { $('#items li').show('slow'); } $('#items li').filter(classSelectors).show('slow'); $('#items li').not(function() { var self = this; var showThis = true; $(this).data('class', 'value'); $.each(classSelectors, function(i, value) { if (!$(self).is(value)) { showThis = false } }); return showThis; }).hide('slow'); } подскажите где ошибка http://jsfiddle.net/9nreyk8h/
Не я понимаю что тут мне не обязаны отвечать и помогать но ты тут тупо флудишь, пользы от тебя сегодня абсолютный ноль, не жалко тут время тратить?
@radioactive для фильтрации вместо класса лучше использовать атрибут data Например, тот же data-id HTML: <div id="names"> <h3>Найдено</h3><br> <div class="toggle" data-id="name1">name 1</div> <div class="toggle" data-id="name2">name 2</div> </div> Тогда логика переключателя будет выглядеть примерно так Код (Javascript): $(document).on('click', '#names .toggle', function(){ var dataID = $(this).attr('data-id'); $('table tr[data-id]').hide(); $('table tr[data-id="'+dataID+'"]').show(); });
Спасибо за ответ, можно ли доработать скрипт для множественного выбора? Или вот я нашел скрипт http://jsfiddle.net/XPUrt/7 но я не могу адекватно его подстроить под себя, максимум что смог это - http://jsfiddle.net/jke0v6aw/ где не могу настроить отображение выбранных полей, работает только скрытие)
Можно сделать так Код (Javascript): $(document).on('click', '#names .toggle', function(){ $(this).toggleClass('active'); var toggleActive = $('#names .toggle.active'); if(toggleActive.length > 0){ $('table tr[data-id]').hide(); toggleActive.each(function(){ var dataID = $(this).attr('data-id'); $('table tr[data-id="'+dataID+'"]').show(); }); }else{ $('table tr[data-id]').show(); } }); Ну а чтобы закрашивать активные кнопки, добавьте стили Код (CSS): .toggle{ display: inline-block; } .toggle.active{ background: green; }