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

[data20]

اگر id تلگرام امضاتون درست ه بهتون پیام میدم
کد جاوارو همون جوری در فایلی که در نظر دارید قرار بدید و فقط 1 بار لازم و خودش هر چند تا جدولی که ایجاد کنید کنترل میکنه

    $(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);
        });    
        });
    });    });

هم تو قایلی که پیوست کردید هم تو پست خودتون myTable هست در تگ tbody که قرمز کردمش

کل کد

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