猿问
下载APP

如何在HTML表上执行实时搜索和过滤

如何在HTML表上执行实时搜索和过滤

我一直在谷歌搜索和搜索Stack Overflow一段时间,但我无法解决这个问题。

我有一个标准的HTML表,包含水果。像这样:

<table>
   <tr>
      <td>Apple</td>
      <td>Green</td>
   </tr>
   <tr>
      <td>Grapes</td>
      <td>Green</td>
   </tr>
   <tr>
      <td>Orange</td>
      <td>Orange</td>
   </tr></table>

在上面我有一个文本框,我想在表中搜索用户类型。因此,如果他们输入Gre例如,表中的橙色行将消失,留下Apple和Grapes。如果他们继续并打字Green Gr苹果行应该消失,只留下葡萄。我希望这很清楚。

并且,如果用户从文本框中删除了部分或全部查询,我希望现在所有与查询匹配的行重新出现。

虽然我知道如何删除jQuery中的表行,但我不知道如何根据此选择性地进行搜索和删除行。有一个简单的解决方案吗?还是一个插件?

如果有人能指出我正确的方向,它将是辉煌的。

谢谢。


SMILET
浏览 52回答 3
3回答

繁星淼淼

我创建了这些例子。简单的indexOf搜索var&nbsp;$rows&nbsp;=&nbsp;$('#table&nbsp;tr');$('#search').keyup(function()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;val&nbsp;=&nbsp;$.trim($(this).val()).replace(/&nbsp;+/g,&nbsp;'&nbsp;').toLowerCase(); &nbsp;&nbsp;&nbsp;&nbsp;$rows.show().filter(function()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;text&nbsp;=&nbsp;$(this).text().replace(/\s+/g,&nbsp;'&nbsp;').toLowerCase(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;!~text.indexOf(val); &nbsp;&nbsp;&nbsp;&nbsp;}).hide();});演示:http://jsfiddle.net/7BUmG/2/正则表达式搜索使用正则表达式的更高级功能将允许您以行中的任何顺序搜索单词。如果您键入apple green或者它将起作用green apple:var&nbsp;$rows&nbsp;=&nbsp;$('#table&nbsp;tr');$('#search').keyup(function()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;val&nbsp;=&nbsp;'^(?=.*\\b'&nbsp;+&nbsp;$.trim($(this).val()).split(/\s+/).join('\\b)(?=.*\\b')&nbsp;+&nbsp;').*$', &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;reg&nbsp;=&nbsp;RegExp(val,&nbsp;'i'), &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text; &nbsp;&nbsp;&nbsp;&nbsp;$rows.show().filter(function()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text&nbsp;=&nbsp;$(this).text().replace(/\s+/g,&nbsp;'&nbsp;'); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;!reg.test(text); &nbsp;&nbsp;&nbsp;&nbsp;}).hide();});演示:http://jsfiddle.net/dfsq/7BUmG/1133/防抖动当您通过搜索多行和多列实现表过滤时,考虑性能和搜索速度/优化非常重要。简单地说你不应该在每次击键时运行搜索功能,这是没有必要的。为了防止过滤太频繁,你应该去除它。上面的代码示例将变为:$('#search').keyup(debounce(function()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;val&nbsp;=&nbsp;$.trim($(this).val()).replace(/&nbsp;+/g,&nbsp;'&nbsp;').toLowerCase(); &nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;etc...},&nbsp;300));你可以选择任何去抖动实现,例如从Lodash&nbsp;_.debounce,或者你可以使用非常简单的东西,就像我在下一个演示中使用的那样(从这里去抖动):http://jsfiddle.net/7BUmG/6230/和http:/ /jsfiddle.net/7BUmG/6231/。

一只斗牛犬

你可以使用像这样的原生javascript<script>function&nbsp;myFunction()&nbsp;{ &nbsp;&nbsp;var&nbsp;input,&nbsp;filter,&nbsp;table,&nbsp;tr,&nbsp;td,&nbsp;i; &nbsp;&nbsp;input&nbsp;=&nbsp;document.getElementById("myInput"); &nbsp;&nbsp;filter&nbsp;=&nbsp;input.value.toUpperCase(); &nbsp;&nbsp;table&nbsp;=&nbsp;document.getElementById("myTable"); &nbsp;&nbsp;tr&nbsp;=&nbsp;table.getElementsByTagName("tr"); &nbsp;&nbsp;for&nbsp;(i&nbsp;=&nbsp;0;&nbsp;i&nbsp;<&nbsp;tr.length;&nbsp;i++)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;td&nbsp;=&nbsp;tr[i].getElementsByTagName("td")[0]; &nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(td)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(td.innerHTML.toUpperCase().indexOf(filter)&nbsp;>&nbsp;-1)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tr[i].style.display&nbsp;=&nbsp;""; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;else&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tr[i].style.display&nbsp;=&nbsp;"none"; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;}}</script>

慕姐8265434

纯Javascript解决方案:适用于所有列和Case Insensitive:function&nbsp;search_table(){ &nbsp;&nbsp;//&nbsp;Declare&nbsp;variables&nbsp; &nbsp;&nbsp;var&nbsp;input,&nbsp;filter,&nbsp;table,&nbsp;tr,&nbsp;td,&nbsp;i; &nbsp;&nbsp;input&nbsp;=&nbsp;document.getElementById("search_field_input"); &nbsp;&nbsp;filter&nbsp;=&nbsp;input.value.toUpperCase(); &nbsp;&nbsp;table&nbsp;=&nbsp;document.getElementById("table_id"); &nbsp;&nbsp;tr&nbsp;=&nbsp;table.getElementsByTagName("tr"); &nbsp;&nbsp;//&nbsp;Loop&nbsp;through&nbsp;all&nbsp;table&nbsp;rows,&nbsp;and&nbsp;hide&nbsp;those&nbsp;who&nbsp;don't&nbsp;match&nbsp;the&nbsp;search&nbsp;query &nbsp;&nbsp;for&nbsp;(i&nbsp;=&nbsp;0;&nbsp;i&nbsp;<&nbsp;tr.length;&nbsp;i++)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;td&nbsp;=&nbsp;tr[i].getElementsByTagName("td")&nbsp;;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;for(j=0&nbsp;;&nbsp;j<td.length&nbsp;;&nbsp;j++) &nbsp;&nbsp;&nbsp;&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;let&nbsp;tdata&nbsp;=&nbsp;td[j]&nbsp;; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(tdata)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(tdata.innerHTML.toUpperCase().indexOf(filter)&nbsp;>&nbsp;-1)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tr[i].style.display&nbsp;=&nbsp;""; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break&nbsp;;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;else&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tr[i].style.display&nbsp;=&nbsp;"none"; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;}}
打开App,查看更多内容
随时随地看视频慕课网APP
我要回答