ساخت صفحه html جستجو و تب دار

[AHF-victory]

درود دوستان من می خوام حدود 30تا تب (حتما رسپانسیو) داشته باشم ،که داخلش فرم مثل حالت زیر باشه و قابلیت جستجو داشته باشه(هر تب جدا)

اما وقتی این 2تارا میزارم کنار هم تب اول کار میکنه ولی تب دوم دیگه کار نمیکنه جستجوش... دلیلیش چیه؟

این فرم-سرچ دار:
https://www.w3schools.com/bootstrap/...able&stacked=h

در این قالب(بخاطر تب بندی)
https://www.w3schools.com/bootstrap/..._tab&stacked=h


میخوام بزارم داخل تم خودم

[data20]

سلام
احتمالا تو بخش js جای اشتباه کردید این نمونه کپی 2 تا صفحه ای که دادید البته اگر منظورتون همین بوده باشه
https://liveweave.com/BsEmvM

[1wp.ir]

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

باید برای هر تب آی دی جداگونه تعریف کنید و توی کد بالا همون مقدار رو قرار بدید. مثلا myInput2,myInput1

[AHF-victory]

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

باید برای هر تب آی دی جداگونه تعریف کنید و توی کد بالا همون مقدار رو قرار بدید. مثلا 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().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>

الان به این شکل گذاشتم اما بازم نمیشه جستجو کار نمیکنه

[1wp.ir]

با تلگرام در ارتباط باشید تا براتون انجام بشه

[AHF-victory]

بالاباش...

[data20]

بالاباش...

احیانا کدی که براتون قرار دادم اصلا نگاه کردید ؟
مجدد این کد خود شما فقط یه کم تغییر داده شده » https://liveweave.com/uAHEii
اگر بالا باش برای واکنش گرا کردن گفتید که فکر نمی کنم کسی وقت بزاره برای این مورد و بهتره از جدول و تب واکنش گرا استفاده کنید
به طور مثال برای جدول از جدول bootstrap یا datatables میتونید استفاده کنید برای تب هم به طور مثال از zozo tab میتونید استفاده کنید یا پلاگین های دیگه

[AHF-victory]

احیانا کدی که براتون قرار دادم اصلا نگاه کردید ؟
مجدد این کد خود شما فقط یه کم تغییر داده شده » https://liveweave.com/uAHEii
اگر بالا باش برای واکنش گرا کردن گفتید که فکر نمی کنم کسی وقت بزاره برای این مورد و بهتره از جدول و تب واکنش گرا استفاده کنید
به طور مثال برای جدول از جدول bootstrap یا datatables میتونید استفاده کنید برای تب هم به طور مثال از zozo tab میتونید استفاده کنید یا پلاگین های دیگه

بله نگاه کردم انتقال دادم اون بر نشد باز...

تب کار میکنه با جستجو اما برای کل جدول
من برای هر جدول میخوام جدا جستجو کنه این کلی جستجو میکنه مشکل اینه
اگر اینو راهنمایی کنید ممنون میشم

[data20]

پیشنمایش دادم که از عملکرد مطمئن شید
اگر انلاین هست ادرس صفحه
اگر افلاین به هر صورتی که میتونید بدید ببینم

[AHF-victory]

کل کد

<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

پیشنمایش دادم که از عملکرد مطمئن شید
اگر انلاین هست ادرس صفحه
اگر افلاین به هر صورتی که میتونید بدید ببینم