使用jQuery从输入过滤表
我正在尝试使用jQuery从字母输入中过滤表。
我在表的两列中有名字和姓氏，我想用其中任何一个过滤行。
我有一个选择输入设置如下：
A B C ...
我想过滤这个表格：
Joe Schmoe $2482.79 172.78.200.124 http://gmail.com John Doe $2776.09 119.232.182.142 http://www.example.com
我如何使用jQuery过滤表？
假设您只有一个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(); } }); }); });
我想出了这个。 与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是您要过滤的那些。
编辑添加了“全部”选项以再次显示行。
如果你的表的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();
$（“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(); } }); }); });