javascript - 表 - 使用 jQuery 进行实时搜索

标签 javascript jquery html css

我一直在研究针对我的数据表进行实时搜索的解决方案。

当我搜索 Jim 时,它按预期工作:-)

但是,当我搜索 Carey 时,没有出现任何结果。为什么是这样? :-(

演示: http://jsfiddle.net/L1d7naem/

$("#search").on("keyup", function() {
    var value = $(this).val();

    $("table tr").each(function(index) {
        if (index !== 0) {

            $row = $(this);

            var id = $row.find("td:first").text();

            if (id.indexOf(value) !== 0) {
                $row.hide();
            }
            else {
                $row.show();
            }
        }
    });
});
table, tr, td, th{
    border: 1px solid blue;
    padding: 2px;
}

table th{
    background-color: #999999;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr><th>Forename</th><th>Surname</th><th>Extension</th></tr>
<tr><td>Jim</td><td>Carey</td><td>1945</td></tr>
<tr><td>Michael</td><td>Johnson</td><td>1946</td></tr>
</table>
<br />
<input type="text" id="search" placeholder="  live search"></input>

最佳答案

这是因为下面一行:

var id = $row.find("td:first").text();  

您只处理表格的第一列,“Carey”在表格的第二列

关于javascript - 表 - 使用 jQuery 进行实时搜索,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39224447/

相关文章:

javascript - 如何将 javascript 对象转换为纯文本,以便在发布数据时我可以发布简单文本

javascript - 旋转动画悬停但在悬停时移动鼠标 ->取消

javascript - 从函数内部获取元素

html - 试图摆脱这个随机的要点

javascript - 重新加载后如何显示复选框中选中的项目的勾号?

javascript - 如何在 Javascript 中用正则表达式匹配精确的位数

javascript - DataTables 不会为按钮创建新行

javascript - 使用 http :www as optional using regex 验证 url

javascript - 使用数组值从 Javascript 关联数组中删除元素

html - 如果背景图片存在则插入 div