如何在HTML表格上执行实时search和过滤
我一直在谷歌search和search堆栈溢出了一段时间，但我无法绕过这个问题。
我有一个标准的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> 在这上面我有一个文本框，我想以表格formssearch用户types。 所以，如果他们inputGre例如，桌子的橙色行将消失，留下苹果和葡萄。 如果他们继续并inputGreen Gr ，苹果行就会消失，只剩下葡萄。 我希望这是明确的。
而且，如果用户从文本框中删除部分或全部查询，则应该重新显示现在与查询匹配的所有行。
虽然我知道如何删除jQuery中的表格行，但我不知道如何根据此select性地执行search和删除行。 有一个简单的解决scheme呢？ 还是一个插件？
如果任何人都能把我指向正确的方向，那将是辉煌的。
谢谢。
我创build了这些例子。
简单的indexOfsearch
var $rows = $('#table tr'); $('#search').keyup(function() { var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase(); $rows.show().filter(function() { var text = $(this).text().replace(/\s+/g, ' ').toLowerCase(); return !~text.indexOf(val); }).hide(); });
演示 ： http : //jsfiddle.net/7BUmG/2/
正则expression式search
使用正则expression式的更高级的function将允许您按行中的任何顺序search单词。 如果你inputapple green或green apple ，它将工作相同：
var $rows = $('#table tr'); $('#search').keyup(function() { var val = '^(?=.*\\b' + $.trim($(this).val()).split(/\s+/).join('\\b)(?=.*\\b') + ').*$', reg = RegExp(val, 'i'), text; $rows.show().filter(function() { text = $(this).text().replace(/\s+/g, ' '); return !reg.test(text); }).hide(); });
演示 ： http : //jsfiddle.net/dfsq/7BUmG/1133/
我有一个jQuery的插件。 它也使用jquery-ui。 你可以在这里看到一个例子http://jsfiddle.net/tugrulorhan/fd8KB/1/
$("#searchContainer").gridSearch({ primaryAction: "search", scrollDuration: 0, searchBarAtBottom: false, customScrollHeight: -35, visible: { before: true, next: true, filter: true, unfilter: true }, textVisible: { before: true, next: true, filter: true, unfilter: true }, minCount: 2 });
这里是在HTML表格中search最好的解决scheme，同时覆盖所有表格 （ 表格中的所有td，tr）， 纯JavaScript和尽可能短的：
<input id='myInput' onkeyup='searchTable()' type='text'> <table id='myTable'> <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> <script> function searchTable() { var input, filter, found, table, tr, td, i, j; input = document.getElementById("myInput"); filter = input.value.toUpperCase(); table = document.getElementById("myTable"); tr = table.getElementsByTagName("tr"); for (i = 0; i < tr.length; i++) { td = tr[i].getElementsByTagName("td"); for (j = 0; j < td.length; j++) { if (td[j].innerHTML.toUpperCase().indexOf(filter) > -1) { found = true; } } if (found) { tr[i].style.display = ""; found = false; } else { tr[i].style.display = "none"; } } } </script>
我发现dfsq的回答非常有用。 我做了一些适用于我的小修改（我在这里发布，以防其他人使用）。
- 使用
class作为钩子，而不是表格元素tr - 显示/隐藏父
class时，在子classsearch/比较文本 - 通过仅将
$rows文本元素存储到数组中一次（并避免$rows.length乘以计算）来提高效率，
var $rows = $('.wrapper'); var rowsTextArray = []; var i = 0; $.each($rows, function() { rowsTextArray[i] = $(this).find('.fruit').text().replace(/\s+/g, ' ').toLowerCase(); i++; }); $('#search').keyup(function() { var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase(); $rows.show().filter(function(index) { return (rowsTextArray[index].indexOf(val) === -1); }).hide(); });
span { margin-right: 0.2em; }
<input type="text" id="search" placeholder="type to search" /> <div class="wrapper"><span class="number">one</span><span class="fruit">apple</span></div> <div class="wrapper"><span class="number">two</span><span class="fruit">banana</span></div> <div class="wrapper"><span class="number">three</span><span class="fruit">cherry</span></div> <div class="wrapper"><span class="number">four</span><span class="fruit">date</span></div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
谢谢@dfsq非常有用的代码！
我做了一些调整，也许有些人也喜欢他们。 我保证你可以search多个单词，而不必严格匹配。
示例行：
- 苹果和梨
- 苹果和香蕉
- 苹果和桔子
- …
你可以search'ap pe'，它会识别第一行
你可以search“香蕉苹果”，它会识别第二行
演示： http : //jsfiddle.net/JeroenSormani/xhpkfwgd/1/
var $rows = $('#table tr'); $('#search').keyup(function() { var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase().split(' '); $rows.hide().filter(function() { var text = $(this).text().replace(/\s+/g, ' ').toLowerCase(); var matchesSearch = true; $(val).each(function(index, value) { matchesSearch = (!matchesSearch) ? false : ~text.indexOf(value); }); return matchesSearch; }).show(); });
Datatable JS插件也是一个很好的替代html表格的accomedatesearchfunction
var table = $('#example').DataTable(); // #myInput is a <input type="text"> element $('#myInput').on( 'keyup', function () { table.search( this.value ).draw(); } );
https://datatables.net/examples/basic_init/zero_configuration.html
