发表新帖
发表新帖

Filter table from <select> input using jQuery

后端 未结
关注
5 2077
庸人自扰
庸人自扰 2021-02-06 14:14

I\'m trying to filter a table from an alphabetical

提交评论
  •  加载中...
  • 孤街浪徒
    2021-02-06 15:05

    Try this. If necessary substitute y with $(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();
        }
    });
});

    Edit

    @SolutionYogi. You are right. I guess this line can be rewriten as:

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

    Never tried that though.

    EDIT 2

    I tested this. I hope is elegant enough as well and I doesn't have more errors.

    $('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();
                    }
             });
       });
});
    0 讨论(0)
  • 挽巷
    2021-02-06 15:12

    This will work assuming you only have one select and one table that is stuctured like your example

    $(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();
            }
        });
    });
});
    0 讨论(0)
  • 北恋
    2021-02-06 15:16

    I came up with this. Pretty similar to what Elzo came up with but it limits it to the first two columns of the table.

     $('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();
                     }
                 }
             });             

         });
     }             
 });

    It doesn't ignore case and assumes you have one select and the only tr's on the page are the ones you want to filter.

    EDIT Added an 'ALL' option to show rows again.

    0 讨论(0)
  • 鱼传尺愫
    2021-02-06 15:16

    If the id of your table is sel, and the table is tab, this will do the trick. Change eq(0) to change the column to look in. An empty value in the select box will re-show all 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();
    0 讨论(0)
    •  看不清?
    提交回复
    热议问题