带有文本框的 JQuery 表过滤器答案

【问题标题】：JQuery table filter with text box带有文本框的 JQuery 表过滤器
【发布时间】：2014-06-09 11:36:42
【问题描述】：

需要通过文本搜索从表格外部过滤表格。例如，如果我在输入元素中写下一个单词，我想获取表中包含该单词的所有行。

【问题讨论】：

标签： javascript jquery filtering html-table

【解决方案1】：

这样会更好：

$("#txtFilter").keyup(function () {
    var val = $(this).val().toLocaleLowerCase();
    $("tr", table).each(function (i) {
        var content = '';
        $(this).find('td').each(function (j) {
            content += '' + $(this).text().trim();
        });

        if (content.toLowerCase().indexOf(val) == -1) {
            $(this).hide();
        } else {
            $(this).show();
        }
    });
});

【讨论】：

【解决方案2】：

将此代码放在页面的“head”部分：

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
 <script>
    $(document).ready(function () {
        $("#searchInput").keyup(function () {
            var val = $(this).val();

            $("#searchTable tr td").each(function (i) {
                var content = $(this).text();
                if (content.toLowerCase().indexOf(val) == -1) {
                    $(this).parent().hide();
                } else {
                    $(this).parent().show();
                }
            });
        });
    });
</script>

让我们假设你的 html 看起来像：

   <div>
        <input type="text" id="searchInput" />
        <table id="searchTable">
            <tr>
                <td>test</td>
            </tr>
            <tr>
                <td>Latest</td>
            </tr>
            <tr>
                <td>Mest</td>
            </tr>
            <tr>
                <td>test</td>
            </tr>
            <tr>
                <td>Best</td>
            </tr>
            <tr>
                <td>chest</td>
            </tr>
            <tr>
                <td>test</td>
            </tr>
            <tr>
                <td>Waste</td>
            </tr>
            <tr>
                <td>Test</td>
            </tr>
        </table>


    </div>

【讨论】：

【解决方案3】：

也许这会对你有所帮助。

<input type="text" id="searchInput" />
<table id="searchTable">
<td>test</td>
<td>test1</td>
<td>test1</td>
<td>test2</td>
<td>test</td>
<td>test3</td>
<td>test</td>
</table>

<script>
$("#searchInput").keyup(function() {
var val = $(this).val();

$("#searchTable td").each(function(i) {
    var content = $(this).html();
    if(content.toLowerCase().indexOf(val) == -1) {
        $(this).hide();
    } else {
        $(this).show();
    }
});
});
</script>

http://jsfiddle.net/pCBe4/

干杯！

【讨论】：

【解决方案4】：

作为参考，我没有在项目中测试过的其他前端表排序/搜索库：

Dynatable
- 这个似乎比 List.js 功能更丰富
Sortable
- 只进行排序

【讨论】：

【解决方案5】：

这个用例有几个 javascript 库，找到了

List.js

工作得很好。我以为 jquery 常用的tablesorter 插件有某种扩展名，但我再也找不到了。

【讨论】：