Javascript 带文本框的JQuery表过滤器

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

这个用例有几个javascript库，可以找到

---

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

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

• • 这一个似乎比List.js功能更丰富
• • 只进行排序吗

---

也许这会对你有所帮助

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

测试
测试1
测试1
测试2
测试
测试3
测试
$（“#searchInput”）.keyup（函数（）{
var val=$（this.val（）；
$（“#searchTable td”）。每个（函数（i）{
var content=$（this.html（）；
if（content.toLowerCase（）.indexOf（val）=-1）{
$（this.hide（）；
}否则{
$（this.show（）；
}
});
});

干杯
将此代码放在页面的“头部”部分：

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

$（文档）.ready（函数（）{
$（“#searchInput”）.keyup（函数（）{
var val=$（this.val（）；
$（“#searchTable tr td”）。每个（函数（i）{
var content=$（this.text（）；
if（content.toLowerCase（）.indexOf（val）=-1）{
$（this.parent（）.hide（）；
}否则{
$（this.parent（）.show（）；
}
});
});
});

让我们假设您的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>

测试
最新的
梅斯特
测试
最好的
胸部
测试
浪费
试验

这将更有效：

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