Как создать простой фильтр таблицы с помощью jQuery?

Как я могу создать простой фильтр таблицы с хорошим эффектом с помощью jQuery? Я не возражаю против разбивки на страницы.

list → выберите данные базы данных.

Я не хочу использовать плагин, я предпочитаю использовать короткий код.

Пример:

Ответы

Ответ 1

$('#inputFilter').keyup(function() {
    var that = this;
    $.each($('tr'),
    function(i, val) {
        if ($(val).text().indexOf($(that).val()) == -1) {
            $('tr').eq(i).hide();
        } else {
            $('tr').eq(i).show();
        }
    });
});

CHECH THIS

Ответ 2

Обычно мне это не помогает, но мне стало скучно сегодня утром.

http://jsfiddle.net/hHJxP/

Ответ 3

Попробуйте проверить innerHTML строки на значение поля ввода, отображая/скрывая содержимое в зависимости от результата теста.

$('#test').bind('keyup', function() {
    var s = new RegExp(this.value);
    $('tr').each(function() {
        if(s.test(this.innerHTML)) $(this).show();
        else $(this).hide();
    });
});

JSFIDDLE с примером таблицы и поля ввода.

изменить

Лучше использовать .text() вместо innerHTML. Performancewise innerHTML будет лучше, но .text() не принимает html-теги в качестве действительных результатов поиска. JSFIDDLE # 2.

Ответ 4

Я знаю это немного поздно, но надеюсь, что этот код поможет.

<script>
$(document).ready(function(){
  $("#yourInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#yourTableId tr").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});
</script>