根据标题属性值搜索表格内容

Question

我想在我的桌子上设置搜索按钮。搜索按钮应该根据行的第一个和第二个单元格中的标题标签值以及整行来过滤值。我能够在不依赖于标题标签的情况下执行此操作我还需要使用标题标签。

我怎样才能做到这一点？

$(document).ready(function() {
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#myTable tr").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
  <h2>Filterable Table</h2>
  <p>Type something in the input field to search the table for first names, last names or emails:</p>
  <input class="form-control" id="myInput" type="text" placeholder="Search.." autocomplete="off">
  <br>
  <table class="table table-bordered table-striped">
    <thead>
      <tr>
        <th>Testname</th>
        <th>Description</th>
        <th>Created on</th>
        <th>Updated on</th>
      </tr>
    </thead>
    <tbody id="myTable">
      <tr>
        <td title="test_name">Test Name</td>
        <td title="test desctiption"> trail testing</td>
        <td>yesterday</td>
        <td>two hour ago</td>
      </tr>
      <tr>
        <td title="test_name">
          Trail Test
        </td>
        <td title="desctiption">testing</td>
        <td>today</td>
        <td>a hour ago</td>>
      </tr>
    </tbody>
  </table>
</div>

Answer 1

您也可以过滤标题文字： （PS：不要在过滤器中切换 - 这会滥用副作用）

＆＃13;

＆＃13;

$(document).ready(function() {
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    var re = RegExp(value.replace(/([\(\)])/g,"\\$1"), "i"); // escape ()
    $("#myTable tr").hide().filter(function() {
      var inTitle = $(this).find("td").filter(function() {
        return re.test(this.title);
      }).length > 0; // is in title?

      return re.test($(this).text()) || inTitle
    }).show();
  });
});

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
  <h2>Filterable Table</h2>
  <p>Type something in the input field to search the table for first names, last names or emails:</p>
  <input class="form-control" id="myInput" type="text" placeholder="Search.." autocomplete="off">
  <br>
  <table class="table table-bordered table-striped">
    <thead>
      <tr>
        <th>Testname</th>
        <th>Description</th>
        <th>Created on</th>
        <th>Updated on</th>
      </tr>
    </thead>
    <tbody id="myTable">
      <tr>
        <td title="test1">Test Name</td>
        <td title="( test1d )"> trail testing</td>
        <td>yesterday</td>
        <td>one hour ago</td>
      </tr>
      <tr>
        <td title="test2">
          Trail Test
        </td>
        <td title="(test2d)">testing</td>
        <td>today</td>
        <td>a hour ago</td>>
      </tr>
    </tbody>
  </table>
</div>

＆＃13;

＆＃13;

＆＃13;