Question

我想使用javascript引导我使用bootstrap表在多个列上搜索搜索功能。在这里，我将在第一列显示用于搜索的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>

如何使用javascript和bootstrap表搜索多个表colums？

1 个答案: