نمایش نسخه قابل چاپ
درود دوستان من می خوام حدود 30تا تب (حتما رسپانسیو) داشته باشم ،که داخلش فرم مثل حالت زیر باشه و قابلیت جستجو داشته باشه(هر تب جدا)
اما وقتی این 2تارا میزارم کنار هم تب اول کار میکنه ولی تب دوم دیگه کار نمیکنه جستجوش... دلیلیش چیه؟
این فرم-سرچ دار:
https://www.w3schools.com/bootstrap/...able&stacked=h
در این قالب(بخاطر تب بندی)
https://www.w3schools.com/bootstrap/..._tab&stacked=h
میخوام بزارم داخل تم خودم
سلام
احتمالا تو بخش js جای اشتباه کردید این نمونه کپی 2 تا صفحه ای که دادید البته اگر منظورتون همین بوده باشه
https://liveweave.com/BsEmvM
باید برای هر تب آی دی جداگونه تعریف کنید و توی کد بالا همون مقدار رو قرار بدید. مثلا myInput2,myInput1کد HTML:<script>
$(document).ready(function(){
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#myTable tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
</script>
ممنوننقل قول:
نوشته اصلی توسط 1wp.ir
الان به این شکل گذاشتم اما بازم نمیشه جستجو کار نمیکنهکد:
<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().indexOf(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().indexOf(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>
با تلگرام در ارتباط باشید تا براتون انجام بشه
بالاباش...
احیانا کدی که براتون قرار دادم اصلا نگاه کردید ؟نقل قول:
نوشته اصلی توسط AHF-victory
مجدد این کد خود شما فقط یه کم تغییر داده شده » https://liveweave.com/uAHEii
اگر بالا باش برای واکنش گرا کردن گفتید که فکر نمی کنم کسی وقت بزاره برای این مورد و بهتره از جدول و تب واکنش گرا استفاده کنید
به طور مثال برای جدول از جدول bootstrap یا datatables میتونید استفاده کنید برای تب هم به طور مثال از zozo tab میتونید استفاده کنید یا پلاگین های دیگه
بله نگاه کردم انتقال دادم اون بر نشد باز...نقل قول:
نوشته اصلی توسط data20
تب کار میکنه با جستجو اما برای کل جدول
من برای هر جدول میخوام جدا جستجو کنه این کلی جستجو میکنه مشکل اینه
اگر اینو راهنمایی کنید ممنون میشم
پیشنمایش دادم که از عملکرد مطمئن شید
اگر انلاین هست ادرس صفحه
اگر افلاین به هر صورتی که میتونید بدید ببینم
کل کد
یک صفحه جاوا هم ساختم و آدرس دادم که بخونه که کد زیر داخلش هست(از همون لینک گذاشتم)کد:
<div class="container">
<h2>Dynamic Tabs</h2>
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">Home</a></li>
<li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
<li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
<li><a data-toggle="tab" href="#menu3">Menu 3</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<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 filter" 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>amir</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>
</div>
<div id="menu1" class="tab-pane fade">
<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 filter" 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>no</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>
</div>
<div id="menu2" class="tab-pane fade">
<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 filter" 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>
</div>
<div id="menu3" class="tab-pane fade">
<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 filter" 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>
</div>
</div>
</div>
اینم لینک کد کل صفحهکد:/**
* Created by Amir Fallah on 16/09/2018.
*/
$(document).on("keyup",'.filter', function(e){
var value = $(this).val().toLowerCase();
$(this).parent().find("table tr").filter(function(){
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
});
});
https://up.20script.ir/file/fdb6-about-us-4.zip
نقل قول:
نوشته اصلی توسط data20
id="myTable از جداول پاک کنید
بعد قسمت جاوا اسکریپت به این صورت وارد کنید :
کد نهای به این شکل بدون تغییر » https://jsfiddle.net/sk654pfe/1/کد:$(document).ready(function () {
$(document).on("keyup",'.filter', function(e){
var value = $(this).val().toLowerCase();
$(this).parent().find("table tr").filter(function(){
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
});
});
});
هم تب کار میکنه هم جستجو در هر جدول به تنهایی انجام میشه
فقط برای نمایش style="margin-top: 320px;" اضافه کردم که تو سیستم خودتون میتونید پاکش کنید
لینک های js , css هم که از حالا کامند خارج کنید
ممنون امکان داره ای دی تلگرام بدید؟نقل قول:
نوشته اصلی توسط data20
کد هارو که وارد میکنم جستجو کار میکنه اما همه جدول ها دیتاشون یکیه محتوا عوض نمیشه...
مثلا همه کلمه amir را نشان میدن هر تبی باشم فرقی نمیکنه
البته من " id="myTable از جداول پاک کنید" پیدا نکردم...
این کد جاوا داخل همون table.js که خودم ساختم وارد کنم؟
یا پایین هر جدول قبل از بسته شدن div ها
اگر id تلگرام امضاتون درست ه بهتون پیام میدم
کد جاوارو همون جوری در فایلی که در نظر دارید قرار بدید و فقط 1 بار لازم و خودش هر چند تا جدولی که ایجاد کنید کنترل میکنه
هم تو قایلی که پیوست کردید هم تو پست خودتون myTable هست در تگ tbody که قرمز کردمشکد HTML:$(document).ready(function () { $(document).ready(function () {
$(document).on("keyup",'.filter', function(e){
var value = $(this).val().toLowerCase();
$(this).parent().find("table tr").filter(function(){
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
});
});
}); });
نقل قول:
نوشته اصلی توسط AHF-victory
بله ممنون amirhosseinfallahنقل قول:
نوشته اصلی توسط data20