<script>
$(document).ready(function(){
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#myTable tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexO f(value) > -1)
});
});
});
</script>
باید برای هر تب آی دی جداگونه تعریف کنید و توی کد بالا همون مقدار رو قرار بدید. مثلا myInput2,myInput1
ممنون
<div class="tab">
<button class="tablinks" onclick="openCity(event, 'teh-5')">تهران مرکز</button>
<button class="tablinks" onclick="openCity(event, 'teh-4')">تهران جنوب</button>
<button class="tablinks" onclick="openCity(event, 'teh-3')">تهران غرب</button>
<button class="tablinks" onclick="openCity(event, 'teh-2')">تهران شرق</button>
<button class="tablinks" onclick="openCity(event, 'teh-1')">تهران شمال</button>
</div>
<div id="teh-5" class="tabcontent">
<h3>تهران مرکز</h3>
<p>London is the capital city of England.</p>
</div>
<div id="teh-4" class="tabcontent">
<h3>تهران جنوب</h3>
<p>Paris is the capital of France.</p>
</div>
<div id="teh-3" class="tabcontent">
<h3>تهران غرب</h3>
<p>Tokyo is the capital of Japan.</p>
</div>
<div id="teh-2" class="tabcontent">
<h3>تهران شرق</h3>
<div class="container">
<h2>Filterable Table</h2>
<p>Type something in the input field to search the table for first names, last names or emails:</p>
<input class="form-control" id="teh-2" type="text" placeholder="Search..">
<br>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody id="myTable">
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@mail.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@greatstuff.com</td>
</tr>
<tr>
<td>Anja</td>
<td>Ravendale</td>
<td>a_r@test.com</td>
</tr>
</tbody>
</table>
<p>Note that we start the search in tbody, to prevent filtering the table headers.</p>
</div>
<script>
$(document).ready(function(){
$("#teh-2").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#myTable tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexO f(value) > -1)
});
});
});
</script>
</div>
<div id="teh-1" class="tabcontent">
<h3>تهران شمال</h3>
<div class="container">
<h2>Filterable Table</h2>
<p>Type something in the input field to search the table for first names, last names or emails:</p>
<input class="form-control" id="teh-1" type="text" placeholder="Search..">
<br>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody id="myTable">
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@mail.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@greatstuff.com</td>
</tr>
<tr>
<td>Anja</td>
<td>Ravendale</td>
<td>a_r@test.com</td>
</tr>
</tbody>
</table>
<p>Note that we start the search in tbody, to prevent filtering the table headers.</p>
</div>
<script>
$(document).ready(function(){
$("#teh-1").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#myTable tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexO f(value) > -1)
});
});
});
</script>
</div>
<script>
function openCity(evt, cityName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
</script>
الان به این شکل گذاشتم اما بازم نمیشه جستجو کار نمیکنه