Question

我一直在为我的数据表上的实时搜索解决方案。

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

但是，当我搜索Carey时，不会显示任何结果。为什么是这样？： - （

＆＃13;

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

＆＃13;

table, tr, td, th{
    border: 1px solid blue;
    padding: 2px;
}

table th{
    background-color: #999999;
}

＆＃13;

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

＆＃13;

Answer 1

因为以下一行：

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

您正在制作表格的第一列和＆＃34; Carey＆＃34;在表的第二列

Answer 2

您可以通过每个循环中的以下更正来实现您想要的行为（还要注意条件中的< 0 ...）：

var id = $.map($row.find('td'), function(element) {
    return $(element).text()
}).join(' ');

if (id.indexOf(value) < 0) {
    $row.hide();
} else {
    $row.show();
}

Answer 3

试试这个。您必须迭代所有列，一旦找到任何匹配，只需使用return false;函数中的each()转义循环。此外，如果找不到字符串，indexOf将返回-1。

$("#search").on("keyup", function() {
    var value = $(this).val();

    $("table tr").each(function(index) {
        if (index !== 0) {

            $row = $(this);

            $row.find("td").each(function(){
              var id = $(this).text();
              if (id.indexOf(value) < 0) {
                $row.hide();
              }
              else {
                $row.show();
                return false;
              }
            });
        }
    });
});

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>

Answer 4

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

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

            $row = $(this);

            var id = $.map($row.find('td'), function(element) {
    return $(element).text()
}).join(' ');





            if (id.indexOf(value) <0) {
                $row.hide();
            }
            else {
                $row.show();
            }
        }
    });
});

http://jsfiddle.net/Lyxex4tp/

Answer 5

试试这个：

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

$("table td").each(function() {
    if(value.match($(this).text)) {
        console.log($(this).text());
    }

    else {
        $("table").hide();
    }
});
});

尝试与所有td元素匹配。

Answer 6

希望这有效，

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

$("table tr").each(function(index) {
    if (index !== 0) {
        var id = $(this).children().text()
        if (id.indexOf(value) < 0) {
           $(this).hide();
        }else {
            $(this).show();
        }
    }
 });
});

这是工作小提琴https://jsfiddle.net/44Lux7ze/

表 - 使用jQuery进行实时搜索

6 个答案: