Фильтрация таблицы. Показывать контент, если применяется одно из правил

Question

Фильтрация таблицы. Показывать контент, если применяется одно из правил

0

У меня есть таблица, где я могу фильтровать, если какой-то человек является иллюстратором или писателем.

<table>
  <tr class="writer">
    <td>John Doe</td>
    <td>Jan 01, 1980</td>
    <td>[email protected]</td>
  </tr>
  <tr class="writer illustrator">
    <td>Jane Doe</td>
    <td>Sept 01, 1980</td>
    <td>[email protected]</td>
  </tr>
  <tr class="illustrator">
    <td>Mel Smith</td>
    <td>Aug 01, 1980</td>
    <td>[email protected]</td>
  </tr>
  <tr class="writer">
    <td>Harry Smith</td>
    <td>Dec 01, 1980</td>
    <td>[email protected]</td>
  </tr>
</table>
<button id="writer">writer</button>
<button id="illustrator">illustrator</button>
<button id="reset">reset</button>

и это jquery

jQuery(function () {
$('#illustrator').click(function () {
    $('table tr.writer').hide();
    $('table tr.illustrator').show();
})
$('#writer').click(function () {
    $('table tr.writer').show();
    $('table tr.illustrator').hide();
})
$('#reset').click(function () {
    $('table tr').show();
})
})

Моя проблема прямо сейчас, если строка таблицы имеет тот же класс, эта определенная строка не появляется. Как и в этом примере, Jane Doe не появляется, когда я нажимаю кнопку writer. Как мне это сделать? Благодарю!

user3079066 31 март 2014, в 08:13

Источник

Теги:

jquery

button

filter

3 ответа

Ещё вопросы

Arun P Johny · Answer 1 · 2014-03-31T04-08-00.000Z

Просто измените порядок укрытия и шоу

jQuery(function () {
    $('#illustrator').click(function () {
        $('table tr.writer').hide();
        $('table tr.illustrator').show();
    })
    $('#writer').click(function () {
        $('table tr.illustrator').hide();
        $('table tr.writer').show();
    })
    $('#reset').click(function () {
        $('table tr').show();
    })
})

Демо: скрипка

Если вы хотите немного приправить его, вы можете игнорировать эти записи, используя: not-selector like

jQuery(function () {
    $('#illustrator').click(function () {
        $('table tr:not(.illustrator)').hide();
        $('table tr.illustrator').show();
    })
    $('#writer').click(function () {
        $('table tr:not(.writer)').hide();
        $('table tr.writer').show();
    })
    $('#reset').click(function () {
        $('table tr').show();
    })
})

Демо: скрипка

Другой вариант поддержки нескольких типов - иметь один обработчик для кнопок и указывать в них тип цели, например

<button class="trigger" data-target="writer">writer</button>
<button class="trigger" data-target="illustrator">illustrator</button>
<button class="trigger">reset</button>

тогда

jQuery(function () {
    $('.trigger').click(function () {
        var target = $(this).data('target');
        if (target) {
            $('table tr:not(.' + target + ')').hide();
            $('table tr.' + target).show();
        } else {
            $('table tr').show();
        }
    })
})

Демо: скрипка

Sadegh Maleki · Answer 2 · 2014-03-31T03-43-00.000Z

вы должны проверить, что у элемента нет вашего класса

jQuery(function () {
            $('#illustrator').click(function () {
                $('table tr.writer:not(.illustrator)').hide();
                $('table tr.illustrator').show();
            })
            $('#writer').click(function () {
                $('table tr.writer').show();
                $('table tr.illustrator:not(.writer)').hide();
            })
            $('#reset').click(function () {
                $('table tr').show();
            })
        })

Neel · Answer 3 · 2014-03-31T03-27-00.000Z

просто попробуйте под кодом. Вам нужно изменить порядок в кодировке, как показано ниже.

 $('#writer').click(function () {
        $('table tr.illustrator').hide();
        $('table tr.writer').show();
    })

http://jsfiddle.net/avmCX/23/