如何使用 javascript 和 bootstrap 表对多个表列进行搜索？答案

【问题标题】：How to do search on Multiple table colums using javascript and bootstrap table?如何使用 javascript 和 bootstrap 表对多个表列进行搜索？
【发布时间】：2017-04-25 05:23:27
【问题描述】：

我想通过使用 javascript 引导我使用引导表在多个列上搜索做搜索功能。在这里，我展示了用于在第一列搜索的 javascript 代码。指导我如何使用 javascript 使用更多列。

$("#search").on("keyup",function(){
var value=$(this).val();
$("table tr").each(function(index){
    if (index!==0){
        $row = $(this);
        var id= $row.find("td:first").text();
        if (id.indexOf(value)!==0){
            $row.hide();
        }
        else{
            $row.show();
        }
    }
});

});

HTML

 <input type="text" name="search" id="search" placeholder="Search">
      <table data-toggle="table" data-sort-name="name" data-sort-order="asc" >
           <thead>
           <tr>
                <th data-field="name" data-sortable="true">Name</th>
                <th data-field="address" data-sortable="true">Address</th>
                <th data-field="birthdate" data-sortable="true">Birth Date</th>
                <th>Gender</th>
                <th data-field="hobby" data-sortable="true">Hobbies</th>
                <th>Action</th>
           </tr>
            </thead>

【问题讨论】：

能否请您附上您的 HTML，这样我们才能给出更准确的答案
是的，我正在添加。上传的 HTML
你的桌子一定有更多
更多信息只有 php echo 用于在 tbody 中打印值，这就是我没有写的原因
我已经更新了我的答案，告诉我它是否适合你

标签： javascript php jquery bootstrap-table

【解决方案1】：

试试这个，

如果没有完整的 html 表格，我只能猜测它的外观并尝试创建可行的东西

$("#search").on("keyup", function() {
  var value = $(this).val().toLowerCase();
  console.clear()
  $("table tr").each(function(index) {
    if (index !== 0) {
      $row = $(this);
      $row.find("td").each(function(i, td) {
        var id = $(td).text().toLowerCase();
        console.log(id + " | " + value + " | " + id.indexOf(value))
        if (id.indexOf(value) !== -1) {
          $row.show();
          return false;
        } else {
          $row.hide();
        }
      })
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="search" id="search" placeholder="Search">
<table data-toggle="table" data-sort-name="name" data-sort-order="asc">
  <thead>
    <tr>
      <th data-field="name" data-sortable="true">Name</th>
      <th data-field="address" data-sortable="true">Address</th>
      <th data-field="birthdate" data-sortable="true">Birth Date</th>
      <th>Gender</th>
      <th data-field="hobby" data-sortable="true">Hobbies</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Peter</td>
      <td>Street 123</td>
      <td>03 may</td>
      <td>Male</td>
      <td>Code</td>
      <td>None</td>
    </tr>
    <tr>
      <td>Emma</td>
      <td>Street 123</td>
      <td>03 may</td>
      <td>Female</td>
      <td>Code</td>
      <td>None</td>
    </tr>
  </tbody>
</table>

【讨论】：