Question

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

Answer 1

将此代码放入＆＃34; head＆＃34;页面部分：

 <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>

Answer 2

此用例有几个javascript库，找到

List.js

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

Answer 3

供参考，其他前端表排序/搜索库我没有在项目上测试：

Dynatable
- 这个似乎比List.js
Sortable
- 仅进行排序

Answer 4

也许这会对你有帮助。

<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/

干杯！

Answer 5

这会更好用：

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

带有文本框的JQuery表过滤器

5 个答案: