Question

我正在尝试使用jQuery从字母<select>输入中过滤表。

我在表格的两列中有名字和姓氏，我想用其中任何一个过滤行。

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

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

我想过滤此表：

<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>

我如何使用jQuery过滤表？

Answer 1

这将有效，假设您只有一个选择和一个像您的示例

那样被结构化的表

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

Answer 2

我想出了这个。与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();
                     }
                 }
             });             

         });
     }             
 });

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

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

Answer 3

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

Answer 4

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

Answer 5

$（“td：not（：contains（'”+ input_value +“'））”）。remove（）;

这是区分大小写的......您具体试图过滤什么？

使用jQuery </select>从<select>输入过滤表

5 个答案: