通过选择选项过滤表行

时间:2019-01-25 04:58:57

标签: javascript jquery html filter

我有一个要使用选择选项进行过滤的表,但是我不知道如何返回并显示初始过滤器后的所有数据。我还需要帮助来干燥代码。

#!/usr/bin/perl
use strict;
use warnings;
use Digest::SHA qw(sha256_hex);
my $inputfile = 'inputfile.dat';
open(my $fh,'<',$inputfile)
 or die "Could not open file '$inputfile' $!";
while (my $row = <$fh>){
chomp $row;
my @fields=split /\|/,$row;
print $fields[0];
print "|";
print $fields[1];
print "|";
print sha256_hex($fields[1]);
print "\n";
}

我不想仅重复// SHOWS INDIVIDUAL FILTER BUT CAN'T SHOW ALL $(document).ready(function($) { $("#sortAwardType").change(function() { $("table").show(); var selection = $(this).val().toUpperCase(); var dataset = $(".awards-body").find("tr"); dataset.show(); if(selection) { dataset.filter(function(index, item) { // Filter shows table row with the word 'General' return $(item).find(":contains('General')").text().toUpperCase().indexOf(selection) === -1;}).hide(); } else { // .all corresponds to a "Show All" option. When selected the data doesn't show $("#sortAwardTable").change(function(){ $(".all").dataset.show(); }); } }); }); // ATTEMPTING DRY CODE. NOW I CAN'T FILTER AT ALL $(document).ready(function($) { $("#sortAwardType").change(function() { $("table").show(); var selection = $(this).val().toUpperCase(); var dataset = $(".awards-body").find("tr"); var match = [ ":contains('General')", ":contains('Free')", ":contains('Regional')", ":contains('Demographic')"]; dataset.show(); if(selection) { dataset.filter(function(index, item) { return $(item).find(match).text().toUpperCase().indexOf(selection) === -1;}).hide(); } else { // .all corresponds to a "Show All" option. When selected I want all data to show but instead it only shows an empty table (header present but no rows) $("#sortAwardTable").change(function(){ $(".all").dataset.show(); }); } }); }); 来更改if block。我尝试将它们分组到一个数组中并将它们分配给":contains('_____')",但随后过滤器不起作用。

1 个答案:

答案 0 :(得分:0)

salam,您只需将所有包含选择器放在同一字符串中

$(item).find(":contains('General'),:contains('Free'),:contains('Regional'),:contains('Demographic')").

但是,如果您想放轻松,请遵循我的前妻

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="searchBox">
<table id='testTable'>
<tr >
	<td>aa</td>
	<td>bb</td>
	<td>cc</td>
</tr>
<tr >
	<td>ab</td>
	<td>bc</td>
	<td>cd</td>
</tr>
<tr >
	<td>zz</td>
	<td>ee</td>
	<td>ff</td>
</tr>
</table>

<script>
 $('#searchBox').keyup(function(){
 	var val = $(this).val().toLowerCase();
    if(val ===""){
    	$("#testTable > tbody > tr").toggle(true);
    	return;
    }
    $("#testTable > tbody > tr").toggle(false);
    
    $("#testTable").find("td").each(function(){
    	if($(this).text().toLowerCase().indexOf(val)>-1)
                        $(this).parent().toggle(true);
    });
 });

 
</script>