Отфильтровать таблицу из ввода ‹select› с помощью jQuery

Это будет работать, если у вас есть только один выбор и одна таблица, структурированная, как ваш пример.

$(document).ready(function($) {
    var rows = $('table tr').each(function() {
        var row = $(this);
        var columns = row.children('td');

        row.data('name-chars', [
            columns.eq(0).html()[0].toUpperCase(),
            columns.eq(1).html()[0].toUpperCase(),
        ]);
    });

    $('select').change(function() {
        var char = $(this).val().toUpperCase();

        rows.each(function() {
            var row = $(this);
            var chars_to_match = row.data('name-chars');
            if($.inArray(char, chars_to_match) > -1) {
                row.show();
            }
            else {
                row.hide();
            }
        });
    });
});

Я придумал это. Очень похоже на то, что придумал Эльзо, но ограничивает его первыми двумя столбцами таблицы.

 $('select').change( function(e) { 
   var letter = $(this).val();
     if (letter === 'ALL') {
         $ ('tr').show ();
     }
     else {
         $('tr').each( function(rowIdx,tr) {
             $(this).hide().find('td').each( function(idx, td) {
                 if( idx === 0 || idx === 1) {
                     var check = $(this).text();
                     if (check && check.indexOf(letter) == 0) {
                         $(tr).show();
                     }
                 }
             });             

         });
     }             
 });

Он не игнорирует регистр и предполагает, что у вас есть один выбор, и единственные tr на странице — это те, которые вы хотите отфильтровать.

ИЗМЕНИТЬ Добавлен параметр "ВСЕ" для повторного отображения строк.

Если идентификатор вашей таблицы sel, а таблица — tab, это сработает. Измените eq(0), чтобы изменить столбец для поиска. Пустое значение в поле выбора приведет к повторному отображению всех trs.

var selSelection = $("#sel").val();
if(!selSelection) $("#tab tr").show();
else $("#tab tr").show().filter(function(index){
    return $("td:eq(0)", this).html().indexOf(selSelection) == -1;
}).hide();

$("td:not(:contains('" + input_value + "'))").remove();

Это чувствительно к регистру ... что конкретно вы пытаетесь фильтровать?

Попробуй это. При необходимости замените y на $(y).

$('tr').hide();
$('select').change( function(){
    var letter = $(this).val();
    var dataset = $('#tableID').find('td');
    $.each(dataset, function(x, y){
        if( y.substr(0,1) == letter){
            y.parent().show();
        }
    });
});

Изменить

@SolutionYogi. Ты прав. Думаю, эту строку можно переписать так:

var dataset = $('#tableID').find('tr').children('td').slice(0,1);

Хотя никогда этого не пробовал.

ИЗМЕНИТЬ 2

Я проверил это. Я надеюсь, что это достаточно элегантно, и у меня не будет больше ошибок.

$('tr').hide();
$('select').change( function(){
    var letter = $(this).val();
    var dataset = $('#tableID').find('tr');
        $.each(dataset, function(x, y){
            var data = $(y).children().slice(0,2);
                $.each(data, function(a, b){
                    if( $(b).html().substr(0,2) == letter){
                        $(b).parent().show();
                    }
             });
       });
});