使用jQuery从输入。

I'm trying to filter a table from an alphabetical <select> input with jQuery.

我试图从按字母顺序的 <选择> 输入的jQuery中过滤一个表。

I have first and last names in two columns of the table, and I'd like to filter the rows by either of these.

表的两列中有姓和名，我想用这两列中的任何一列来过滤行。

I have a select input set up as so:

我有一个选择输入设置如下:

<select>
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
    ...
</select>

and I'd like to filter this table:

我想对这个表进行过滤:

<tr>
    <td>Joe</td>
    <td>Schmoe</td>
    <td>$2482.79</td>
    <td>172.78.200.124</td>
    <td>http://gmail.com</td>
</tr>
<tr>
    <td>John</td>
    <td>Doe</td>
    <td>$2776.09</td>
    <td>119.232.182.142</td>
    <td>http://www.example.com</td>
</tr>

How would I go about filtering the table using jQuery?

如何使用jQuery过滤表?

5 个解决方案

#1

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

假设您只有一个select和一个与示例相似的表，那么这就可以工作了

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

#2

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.

我想到了这个。和Elzo的想法非常相似，但是它限制了表的前两列。

 $('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.

它不会忽略大小写，假设您有一个选择，并且页面上唯一的tr是您想要筛选的。

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

编辑添加了“ALL”选项，以再次显示行。

#3

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.

如果您的表的id是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();

#4

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

$(" td:没有(:包含(' + input_value + " '))”).remove();

This is case sensitive ... what specifically are you attempting to filter on?

这是区分大小写的……你想要过滤什么?

#5

Try this. If necessary substitute y with $(y).

试试这个。如果需要，用$(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();
        }
    });
});

Edit

编辑

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

@SolutionYogi。你是对的。我想这句话可以改写为:

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

Never tried that though.

从来没有试过。

EDIT 2

编辑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();
                    }
             });
       });
});

#1