Question

我有三个不同的表，我想在其中搜索数据。在此任务中，我成功搜索了数据，但是当我搜索其中一个表的数据时，还将搜索其余两个表。任何人都可以根据他们的方面帮助搜索数据，就像当我那时搜索第一个表的数据时，它应该只给我第一个表的数据一样。

<html>
<head>

<script src="jquery-3.3.1.js"></script>

<script>

function SearchTable()

{
$(document).ready(function(){
  $("#myInput, #yourInput, #ourInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    debugger;
    $("#myTable tr,#yourTable tr,#ourTable tr").filter(function() {
    debugger;
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)

    });
  });
});

}

SearchTable();
</script>


</head>
<body>
<input type="text" id="myInput" placeholder="Search" title="Type">
<br>
<table border="1">
<thead>
<tr>
<th>Name</th>
<th>Email Id</th>
<th>Contact Number</th>
</tr>
</thead>
<tbody id="myTable">
<tr>
<td>Enesh</td>
<td>eneshpal@gmail.com</td>
<td>123456789</td>
</tr>

<tr>
<td>Ramesh</td>
<td>palenesh@gmail.com</td>
<td>174125896</td>
</tr>

<tr>
<td>Suresh</td>
<td>suresh@gmail.com</td>
<td>987654123</td>
</tr>
</tbody>
</table>

<hr>
<input type="text" id="yourInput" placeholder="Search" title="Type">
<br>
<table border="1">
<thead>
<tr>
<th>Name</th>
<th>Email Id</th>
<th>Contact Number</th>
</tr>
</thead>
<tbody id="yourTable">
<tr>
<td>Rakesh</td>
<td>rakes@gmail.com</td>
<td>00014151</td>
</tr>

<tr>
<td>Naval</td>
<td>Naval@gmail.com</td>
<td>1234567879</td>
</tr>

<tr>
<td>Rohit</td>
<td>rohit@gmail.com</td>
<td>123456</td>
</tr>
</tbody>
</table>
<hr>




<input type="text" id="ourInput" placeholder="Search" title="Type">
<br>
<table border="1">
<thead>
<tr>
<th>Name</th>
<th>Email Id</th>
<th>Contact Number</th>
</tr>
</thead>
<tbody id="ourTable">
<tr>
<td>Shubham</td>
<td>Shubham@gmail.com</td>
<td>023456789</td>
</tr>

<tr>
<td>pal</td>
<td>palenesh@gmail.com</td>
<td>111125896</td>
</tr>

<tr>
<td>Suresh</td>
<td>suresh@gmail.com</td>
<td>987654123</td>
</tr>
</tbody>
</table>

</body>
</html>

Answer 1

//put the document ready around your whole logic, not inside the method
$(document).ready(function() {
  function SearchTable() {
    //bind on all your different inputs
    $("#myInput, #yourInput, #ourInput").on("keyup", function() {
      //get the input value, trimmed, and lowercased
      var value = this.value.trim().toLowerCase();
      //get the associated table
      var $table = $("#"+ this.getAttribute('data-target'));
      
      //show all the rows to "undo" previous filtering
      $table.find('tr').show();
      
      //only filter if the value is not blank
      if (value) {
        //find all the rows that do not match the filter, and hide them
        $table.find('tr').filter(function(){
          return this.innerText.toLowerCase().indexOf(value) < 0;
        }).hide();
      }
    });
  }

  SearchTable();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="myInput" placeholder="Search" title="Type" data-target="myTable">
<br>
<table border="1">
  <thead>
    <tr>
      <th>Name</th>
      <th>Email Id</th>
      <th>Contact Number</th>
    </tr>
  </thead>
  <tbody id="myTable">
    <tr>
      <td>Enesh</td>
      <td>eneshpal@gmail.com</td>
      <td>123456789</td>
    </tr>

    <tr>
      <td>Ramesh</td>
      <td>palenesh@gmail.com</td>
      <td>174125896</td>
    </tr>

    <tr>
      <td>Suresh</td>
      <td>suresh@gmail.com</td>
      <td>987654123</td>
    </tr>
  </tbody>
</table>

<hr>
<input type="text" id="yourInput" placeholder="Search" title="Type" data-target="yourTable">
<br>
<table border="1">
  <thead>
    <tr>
      <th>Name</th>
      <th>Email Id</th>
      <th>Contact Number</th>
    </tr>
  </thead>
  <tbody id="yourTable">
    <tr>
      <td>Rakesh</td>
      <td>rakes@gmail.com</td>
      <td>00014151</td>
    </tr>

    <tr>
      <td>Naval</td>
      <td>Naval@gmail.com</td>
      <td>1234567879</td>
    </tr>

    <tr>
      <td>Rohit</td>
      <td>rohit@gmail.com</td>
      <td>123456</td>
    </tr>
  </tbody>
</table>

如何通过jQuery

1 个答案: