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

我希望在我的桌子上有搜索按钮.搜索按钮应根据行的第一个和第二个单元格中的标题标签值以及整行来过滤值.我能够在不依赖于标题标签的情况下执行此操作但我需要用标题标签做这个.

我怎样才能做到这一点？

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

解决方法:

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

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

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