2017-10-05 84 views
1

我試圖用jQuery實現對錶格的過濾。下面是我的測試代碼:使用jQuery進行表格過濾

$("#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>

還是在這裏jsFiddle

我正在尋找:

  • 類型的 「B」,只有第一行仍然存在。帶有「b」的行消失。
  • 鍵入「ll」和「聯盟」仍然(好),但還有「會計&金融」仍然存在。
  • 輸入「cc」並且只有「Accounting & Finance」仍然存在。好。

正如您所看到的,結果非常令人失望。

順便說一句,我得到了這個問題,在這裏對堆棧溢出這種基本功能:

Live search through table rows

回答

1

你接近,你撥弄你不包括jQuery和你的功能剛剛擺脫關閉此行

fiddle

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

大。我認爲jsFiddle會自動包含jQuery。添加並註釋掉該行。例如,當我輸入「fi」或「b」時,它仍然不起作用。我也嘗試過與你的一樣,但它不適用於「fi」。任何其他想法? – birdus

+0

啊。看起來像區分大小寫。甚至沒有想到這一點。大! – birdus