How to search data from multiple table through jQuery

Question

I have three different tables and I want to search for data in them. In this task I successfully searched data but when I search data of one of the table remaining two tables are also being searched. Can anyone help to search data according to the respect of their, Like when I searched data of the first table that time it should give me only data of the first table.

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

How to search data from multiple table through jQuery

Question

1 answers

solution1
0 ACCPTED 2018-07-05 16:07:13

How to search data from multiple table through jQuery

Question

1 answers

solution1 0 ACCPTED 2018-07-05 16:07:13

solution1
0 ACCPTED 2018-07-05 16:07:13