2017-10-05 5 views
1

jQueryを使用してテーブルのフィルタリングを実装しようとしています。ここで私が持っているコードは、テストのためです:jQueryを使用したテーブルのフィルタリング

jsFiddle

$("#txtGroup").keyup(function() { 
 
    var value = this.value; 
 

 
    $("table").find("tr").each(function(index) { 
 
    if (index === 0) return; 
 
    var id = $(this).find("td").find("label").text(); 
 
    $(this).toggle(id.indexOf(value) !== -1); 
 
    }); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input id="txtGroup" /> 
 

 
<table id="tblGroups"> 
 
\t <tr><td><label><input type="checkbox" id="AccountingFinance" name="Accounting &amp; Finance">Accounting &amp; Finance</label></td></tr> 
 
\t <tr><td><label><input type="checkbox" id="AdvancedAnalytics" name="Advanced Analytics">Advanced Analytics</label></td></tr> 
 
\t <tr><td><label><input type="checkbox" id="Alliances" name="Alliances">Alliances</label></td></tr> 
 
    <tr><td><label><input type="checkbox" id="BusinessAdvisoryServices" name="Business Advisory Services">Business Advisory Services</label></td></tr> 
 
\t <tr><td><label><input type="checkbox" id="BusinessApplicationsandIntegration" name="Business Applications and Integration">Business Applications and Integration</label></td></tr> 
 
\t <tr><td><label><input type="checkbox" id="BusinessOperations" name="Business Operations">Business Operations</label></td></tr> 
 
</table>

それともここで私が求めている:

  • "B" を入力し、最初の行は残る。 "b"の行が消えます。
  • "ll"と "Alliances"のタイプは残っていますが、 "Accounting & Finance"も残ります。
  • "cc"と入力し、 "Accounting & Finance"だけが残ります。良い。

ご覧のとおり、結果は非常にヒットします。ところで

、私は、スタックオーバーフローの上に、ここで、この質問から、この基本的な機能を持って:

Live search through table rows

答えて

1

あなたはjQueryのを含めて、あなたの機能ではありませんし、あなたのフィドルに、接近していただけ取り除きますこのラインオフ

fiddle

if (index === 0) return; 
+0

グレート。私はjsFiddleにjQueryを自動的に組み込んだと思った。それを追加し、その行をコメントアウトしました。たとえば、 "fi"や "b"と入力すると、それでも機能しません。私はあなたもそれを試しましたが、それは "fi"のためにはうまくいかなかったのです。他の考え? – birdus

+0

ああ。大文字と小文字が区別されます。それについても考えなかった。すばらしいです! – birdus

関連する問題