jquery搜索只适用于一列，而不是整个html表

只想使用jquery向加载的表添加搜索可能性，但下面的代码仅适用于第一列。我想让它适用于所有的细胞。请检查代码并帮我找出错误：

以下是我的html代码：

<span id="search"></span>

---

我认为在循环一行中的单元格时会出现逻辑问题

这应该起作用：

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

    $("table tr:not(:first-of-type)").each(function (ix, el) {
        $row = $(this);
        $cells = $row.find('td');

        $cells.each(function (ix2, el2) {            
            var cell = $(this).text();

            $row.toggle(cell.indexOf(value) >= 0);
        });
    });
});

---

我认为您不需要做$row。由于您已经在each中，请在列上尝试each：

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

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

            $row = $(this);

            $row.find("td").each(function () {

                var cell = $(this).text();

                if (cell.indexOf(value) != 0) {
                    $(this).hide();
                } else {
                    $(this).show();
                }
            });
        }
    });
});

编辑：

$（“#搜索”）.keyup（函数（）{
var值=$（this.val（）；
if（值.长度）{
$（“表tr”）。每个（函数（索引）{
如果（索引！=0）{
$row=$（此项）；
$row.find（“td”）。每个（函数（）{
var cell=$（this.text（）；
if（单元格索引of（值）<0）{
$row.hide（）；
}否则{
$row.show（）；
return false；//一旦显示，您就不想在下一个单元格中隐藏它
}
});
}
});
}
否则{
//如果搜索文本为空，则显示所有行
$（“表tr”）.show（）；
}
});

为所有tr元素尝试此选项：

var $rows = $('table tr');
$('#search').keyup(function() {
    var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();

    $rows.show().filter(function() {
        var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
        return !~text.indexOf(val);
    }).hide();
});

看一个例子

标题
名称
国家（D）
聚会
房间
电话#
特殊角色
标题
名称
国家（D）
聚会
房间
电话#
特殊角色
参议员
总氮
代表。
455德克森
(202) 224-4944
参议员
WY
代表。
307德克森
(202) 224-6441
$（文档）.ready（函数（）{
变量$table=$（'table'）；
//数据表
var table=$table.DataTable({
长度变化：错误
});
});

---

jsiddle:

这个

var值=$（this.text（））不应该吗像这样
var value=$（this.val（）？什么样的元素是
#search
？它应该是text（），#search是一个元素，所以我需要查看我的答案。提问时您应该清楚。此外，您的代码将无效，因为您正在使用
id search
将事件处理程序附加到元素。ID应该是唯一的，因此它只适用于页面中的第一个ID。
keyup
不会在
th
元素中激发。您需要某种类型的
输入。非常感谢。您的代码运行良好。唯一的问题是我想显示或隐藏整行。我试图更改$（this.show（）；到$（this.closest（“tr”）.show（）；但它没有起作用。你能帮我一下吗？你已经把$row作为变量了，试着隐藏并显示它。如果（…）$row.hide（）；else$row.show（）；这是奇怪的，但它没有工作，在这是以及。我还发现了那个单元格。indexOf（value）！=0只检查单元格文本的第一个字符是否可以发布fiddle？@Pierre.Vriens-此方法用于进行过滤，请查看我提供的JSFIDLE。
$("#search").keyup(function () {
    var value = $(this).val();

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

                $row = $(this);

                $row.find("td").each(function () {

                var cell = $(this).text();

                if (cell.indexOf(value) < 0) {
                    $row.hide();
                } else {
                    $row.show();
                    return false; //Once it's shown you don't want to hide it on the next cell
            }

        });
    }
});
}
else{
    //if empty search text, show all rows
    $("table tr").show();

}
});

var $rows = $('table tr');
$('#search').keyup(function() {
    var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();

    $rows.show().filter(function() {
        var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
        return !~text.indexOf(val);
    }).hide();
});

    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs-3.3.7/jq-2.2.4/dt-1.10.13/r-2.1.1/datatables.min.css" />
    <script type="text/javascript" src="https://cdn.datatables.net/v/bs-3.3.7/jq-2.2.4/dt-1.10.13/r-2.1.1/datatables.min.js"></script>
    <table class="table">
      <thead>
        <tr>
          <th>Title</th>
          <th>Name</th>
          <th>State (D)</th>
          <th>Party</th>
          <th>Room</th>
          <th>Phone #</th>
          <th>Special Role(s)</th>
        </tr>
      </thead>
      <tfoot>
        <tr>
          <th>Title</th>
          <th>Name</th>
          <th>State (D)</th>
          <th>Party</th>
          <th>Room</th>
          <th>Phone #</th>
          <th>Special Role(s)</th>
        </tr>
      </tfoot>
      <tbody id="congress">
        <tr>
          <td>Senator</td>
          <td><a href="http://www.alexander.senate.gov/">Alexander, Lamar</a></td>
          <td>TN</td>
          <td class="republican">Rep.</td>
          <td>455 Dirksen</td>
          <td>(202) 224-4944</td>
          <td></td>
        </tr>

        <tr>
          <td>Senator</td>
          <td><a href="http://www.barrasso.senate.gov">Barrasso, John</a></td>
          <td>WY</td>
          <td class="republican">Rep.</td>
          <td>307 Dirksen</td>
          <td>(202) 224-6441</td>
          <td></td>
        </tr>
      </tbody>
    </table>
<script type="text/javascript">
    $(document).ready(function() {

    var $table = $('table');

    // DataTable
    var table = $table.DataTable({
      lengthChange: false
    });

    });
</script>