时间戳

首页 > 解决方案 > 根据title属性值搜索表格内容

javascript - 根据title属性值搜索表格内容

问题描述

我想在我的表格中添加搜索按钮。搜索按钮应根据行的第一个和第二个单元格中的标题标签值以及整行过滤值。我可以在不依赖标题标签的情况下执行此操作，但我需要也可以使用标题标签执行此操作。

我怎样才能做到这一点？

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

标签： javascriptjqueryhtml

解决方案

您也可以过滤标题文本：（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>

推荐阅读