使用jQuery进行表过滤

时间:2017-10-05 16:11:17

标签: javascript jquery html

我尝试使用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">
	<tr><td><label><input type="checkbox" id="AccountingFinance" name="Accounting &amp; Finance">Accounting &amp; Finance</label></td></tr>
	<tr><td><label><input type="checkbox" id="AdvancedAnalytics" name="Advanced Analytics">Advanced Analytics</label></td></tr>
	<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>
	<tr><td><label><input type="checkbox" id="BusinessApplicationsandIntegration" name="Business Applications and Integration">Business Applications and Integration</label></td></tr>
	<tr><td><label><input type="checkbox" id="BusinessOperations" name="Business Operations">Business Operations</label></td></tr>
</table>
&#13;
&#13;
&#13;

jsFiddle

我正在寻求:

  • 输入&#34; b&#34;并且只剩下第一行。带有&#34; b&#34;的行消失。
  • 输入&#34; ll&#34;和#34;联盟&#34;仍然(好),但也&#34;会计与...金融&#34;仍然存在。
  • 输入&#34; cc&#34;并且只有&#34;会计和&amp;金融&#34;遗迹。好。

正如你所看到的,结果很受欢迎。

顺便说一句,我在Stack Overflow上从这个问题得到了这个基本功能:

Live search through table rows

1 个答案:

答案 0 :(得分:1)

你很亲密,在你的小提琴中,你不包括jQuery,在你的功能中只是摆脱了这一行

fiddle

if (index === 0) return;