Question

我有这个表，我想要做的是通过电子邮件和名称搜索所以当我键入one它应该开始过滤我是非常新的jquery这可以做一些我不想要的使用ajax加载它

<input  id="searchme" name="searchme"  type="text" class="form-control">
    <table>
      <thead>
                <tr>               
                    <th>name</th>
                    <th>Email</th>
                    <th>Status</th>             
                    <th>Date</th>
                </tr>
                </thead>
          <tbody>
               <tr>
                  <td> Nameone</td>
                  <td> oneName@email.com</td>
                </tr>
                 <tr>
                  <td> NameTwpo</td>
                  <td> twoName@email.com</td>
                </tr>
         </tbody>
         </table>


       $(document).on('keyup', '#searchme', function () {

        });

Answer 1

看到你正在使用jQuery，我建议使用经过试验和测试的东西，例如DataTables。它有许多优点，如移动响应设计，排序和过滤等。

根据他们的指示：

包括CSS：

//cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css

包括JS：

//cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js

初始化DataTables：

$(document).ready( function () {
    $('#myTable').DataTable();
});

除非这是学习如何进行搜索的练习，否则我认为没有必要"reinvent the wheel"。

更新＃1

根据您的评论，默认情况下应启用搜索，但在实例中，您无法明确告知其启用搜索：

$('#my-table').DataTable({
    "searching": true
});

阅读材料

searching

Answer 2

你可以使用这样的东西（我用于我的项目）（你应该为你的表设置id ）：

$("#searchme").keyup(function() {
    var rows = $("#fbody").find("tr").hide();
    var data = this.value.split(" ");
    var _rows = $();//an empty jQuery collection
    $.each(data, function(i, v) {
        _rows.add(rows.filter(":contains('" + v + "')");
    });
    myFunction(_rows);
});

Answer 3

＆＃13;

var $tr = $("#searchtable tbody").find("tr");

$(document).on('input', '#searchme', function() { // use the "input" event

  var val = $.trim(this.value);         // trim input value
  var reg = new RegExp(val, "i");       // case insensitive
  
  if (!val) return $tr.show();          // Reset (show all TRs)
  
  $tr.hide().filter(function() {        // Hide all TRs,
    return reg.test(this.textContent);  // filter by text (case insensitive)
  }).show();                            // and show filtered TRs
  
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="searchme" name="searchme" type="text" class="form-control">
<table id="searchtable">
  <thead>
    <tr>
      <th>name</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> Nameone</td>
      <td> oneName@aaa.com</td>
    </tr>
    <tr>
      <td> NameTwo</td>
      <td> twoName@bbb.com</td>
    </tr>
    <tr>
      <td> Nameone</td>
      <td> blaaaaaaaa@ccc.com</td>
    </tr>
  </tbody>
</table>

＆＃13;

在表jquery中搜索和过滤项目

3 个答案: