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

**data20** · September 16th, 2018, 17:50

id="myTable از جداول پاک کنید
بعد قسمت جاوا اسکریپت به این صورت وارد کنید :

کد:

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

کد نهای به این شکل بدون تغییر » https://jsfiddle.net/sk654pfe/1/
هم تب کار میکنه هم جستجو در هر جدول به تنهایی انجام میشه
فقط برای نمایش style="margin-top: 320px;" اضافه کردم که تو سیستم خودتون میتونید پاکش کنید
لینک های js , css هم که از حالا کامند خارج کنید

**AHF-victory** · September 17th, 2018, 14:33

نوشته اصلی توسط data20

id="myTable از جداول پاک کنید
بعد قسمت جاوا اسکریپت به این صورت وارد کنید :

کد:

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

کد نهای به این شکل بدون تغییر » https://jsfiddle.net/sk654pfe/1/
هم تب کار میکنه هم جستجو در هر جدول به تنهایی انجام میشه
فقط برای نمایش style="margin-top: 320px;" اضافه کردم که تو سیستم خودتون میتونید پاکش کنید
لینک های js , css هم که از حالا کامند خارج کنید

ممنون امکان داره ای دی تلگرام بدید؟
کد هارو که وارد میکنم جستجو کار میکنه اما همه جدول ها دیتاشون یکیه محتوا عوض نمیشه...
مثلا همه کلمه amir را نشان میدن هر تبی باشم فرقی نمیکنه
البته من " id="myTable از جداول پاک کنید" پیدا نکردم...

این کد جاوا داخل همون table.js که خودم ساختم وارد کنم؟
یا پایین هر جدول قبل از بسته شدن div ها

**data20** · September 17th, 2018, 17:16

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

کد 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);
        });    
        });
    });    });

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

نوشته اصلی توسط 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>

**AHF-victory** · September 18th, 2018, 12:09

نوشته اصلی توسط data20

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

کد 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);
        });    
        });
    });    });

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

بله ممنون amirhosseinfallah

موضوع: ساخت صفحه html جستجو و تب دار

ابزارهای موضوع

نحوه نمایش موضوع

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

تعداد تشکر ها از data20 به دلیل پست مفید

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

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

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

اطلاعات موضوع

کاربرانی که در حال مشاهده این موضوع هستند

موضوعات مشابه

چگونه مطالب یک سایت خاص را در گوگل جستجو کنیم؟ (html)

استخدام html-css کار حرفه ای

یک جستجو گر ساده برای یک لیست بلند بالا/html

مستر html

دوره تابستان آموزش html (با اعطای مدرک)

مجوز های ارسال و ویرایش