如何在使用javascript和bootstrap表的多表柱上搜索？

Question

我想通過使用javascript指導我使用bootstrap表搜索在多個colums上執行搜索功能。在這裏，我展示了用於第一列搜索的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> 

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