前端table表格查询功能代码

以下是一个简单的前端table表格查询功能的代码示例，使用jQuery和Bootstrap实现:

HTML代码：

<div class="container">
  <input type="text" id="searchInput" class="form-control" placeholder="搜索">
  <table id="myTable" class="table table-bordered table-striped">
    <thead>
      <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>张三</td>
        <td>28</td>
        <td>男</td>
      </tr>
      <tr>
        <td>李四</td>
        <td>35</td>
        <td>男</td>
      </tr>
      <tr>
        <td>王五</td>
        <td>22</td>
        <td>女</td>
      </tr>
    </tbody>
  </table>
</div>

JavaScript代码：

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

在这个代码示例中，我们首先定义了一个搜索框和一个表格。接着，我们使用jQuery监听搜索框的输入事件，并在输入事件发生时，使用jQuery过滤表格中的数据。具体来说，我们将搜索框中的文本转换为小写字母，并使用jQuery的filter()方法过滤表格中的行。如果行的文本中包含搜索框中的文本，我们将其显示出来，否则隐藏它。