Блог

Главная - Вопросы по программированию - Скрыть строку таблицы по выпадающему списку

Скрыть строку таблицы по выпадающему списку

#javascript #html

#javascript #HTML

Вопрос:

У меня есть 2 выпадающих меню (имя пользователя и пол), и у меня есть таблица с 3 столбцами (имя пользователя и пол).
Я хочу отфильтровать таблицу на основе выпадающего значения. Что я должен сделать?

Вот код : 

 <select class="form-control selectpicker">
    <option value="">Username</option>
    <option value="">user1</option>
    <option value="">user2</option>
    <option value="">user3</option>
</select>

<select class="form-control selectpicker">
    <option value="">Gender</option>
    <option value="">M</option>
    <option value="">F</option>

</select>
</div>

<table class="dynamicTable tableTools table table-striped table-primary">
    <!-- Table heading -->
        <thead>
            <tr>
                <th>Username</th>
                <th>Name</th>
                <th>Gender</th>
            </tr>
        </thead>

    <tbody>
        <tr>
            <td>user1</td>
            <td>Jane</td>
            <td>F</td>
        </tr>
        <tr>
            <td>user2</td>
            <td>John</td>
            <td>M</td>
        </tr>
        <tr>
            <td>user3</td>
            <td>Jack</td>
            <td>M</td>
        </tr>

    </tbody>
    <!-- // Table body END -->
</table>
<!-- // Table END -->

Комментарии:

1. Первое, что нужно сделать, прежде чем задавать вопросы здесь, это попробовать самостоятельно…

2. у вас есть какой-нибудь учебник по этому, сэр? самый простой

Ответ №1:

Я создаю это решение.

HTML

 <select id="username" class="form-control selectpicker">
    <option value="">Username</option>
    <option value="">user1</option>
    <option value="">user2</option>
    <option value="">user3</option>
</select>

<select id="gender" class="form-control selectpicker">
    <option value="">Gender</option>
    <option value="">M</option>
    <option value="">F</option>

</select>

<table class="dynamicTable tableTools table table-striped table-primary">
    <!-- Table heading -->
        <thead>
            <tr>
                <th>Username</th>
                <th>Name</th>
                <th>Gender</th>
            </tr>
        </thead>

    <tbody>
        <tr>
            <td>user1</td>
            <td>Jane</td>
            <td>F</td>
        </tr>
        <tr>
            <td>user2</td>
            <td>John</td>
            <td>M</td>
        </tr>
        <tr>
            <td>user3</td>
            <td>Jack</td>
            <td>M</td>
        </tr>

    </tbody>
    <!-- // Table body END -->
</table>

js

 $("#username").on("change",
               function(){
                   var a = $(this).find("option:selected").html();

                   $("table tr td:first-child").each(
                       function(){
                           if($(this).html() != a){
                               $(this).parent().hide();
                           }
                           else{
                               $(this).parent().show();
                           }
                       });
               });

$("#gender").on("change",
               function(){
                   var a = $(this).find("option:selected").html();

                   $("table tr td").each(
                       function(){
                           if($(this).html() != a){
                               $(this).parent().hide();
                           }
                           else{
                               $(this).parent().show();
                           }
                       });
               });

скрипка

Комментарии:

1. спасибо, сэр, я уже пробовал точно так же, как этот пост, но это не работает, я не знаю почему, но, может быть, я что-то упустил?? Этот пример по ссылке (‘fiddle’) — это то, что мне нужно. Я просто не знаю, что не так с моим компьютером, извините, я новичок

2. Это не имеет никакого отношения к вашему компьютеру. Вероятно, вы что-то упустили. Вы включили библиотеку jquery?

3. должен ли я включать библиотеку jquery? мне просто нужен этот скрипт, сэр, я создаю его в 1 файле (html и js), я вставляю ваш js-код в <script></script>, это неправильно?

4. да, есть одна ошибка ‘uncaught ReferenceError: $не определен’. Как я должен это исправить, сэр?

5. Вы должны добавить библиотеку jquery в заголовок вашего кода. Есть два способа. 1) Прямая ссылка из Google <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> или загрузите с http://jquery.com/download/ и добавьте в свой проект. Надеюсь, это поможет 🙂

Ответ №2:

Я создал простой скрипт с помощью jQuery (вы должны включить библиотеку jquery).

HTML:

 <select name="username" class="form-control selectpicker">
    <option value="">Username</option>
    <option value="">user1</option>
    <option value="">user2</option>
    <option value="">user3</option>
</select>

<select name="gender" class="form-control selectpicker">
    <option value="">Gender</option>
    <option value="">M</option>
    <option value="">F</option>

</select>
</div>

<table id="tbl" class="dynamicTable tableTools table table-striped table-primary">
    <!-- Table heading -->
        <thead>
            <tr>
                <th>Username</th>
                <th>Name</th>
                <th>Gender</th>
            </tr>
        </thead>

    <tbody>
        <tr>
            <td>user1</td>
            <td>Jane</td>
            <td>F</td>
        </tr>
        <tr>
            <td>user2</td>
            <td>John</td>
            <td>M</td>
        </tr>
        <tr>
            <td>user3</td>
            <td>Jack</td>
            <td>M</td>
        </tr>

    </tbody>
    <!-- // Table body END -->
</table>
<!-- // Table END -->

Javascript (jQuery):

 $(document).ready(function() {
    function calculate() {
        $('#tbl tbody tr').show();
        var sel_username = $('select[name="username"] option:selected').text();
        var sel_gender = $('select[name="gender"] option:selected').text();

        if(sel_username == 'Username' amp;amp; sel_gender == 'Gender') {
            return;
        }

        $('#tbl tbody tr').each(function() {
            var col_username = $(this).find('td').first();
            var col_gender = $(this).find('td').last();

            if(col_username.text() !== sel_username amp;amp; sel_username !== 'Username') {
                $(this).hide();
            }

            if(col_gender.text() !== sel_gender amp;amp; sel_gender !== 'Gender') {
                if($(this).is(':visible')) {
                    $(this).hide();
                }
            }
        });
    }

    $('select[name="username"]').change(function() {
        calculate();
    });

    $('select[name="gender"]').change(function() {
        calculate();
    });
});

JSFIDDLE

Комментарии:

1. спасибо, сэр, это то, что мне нужно, но я не знаю, что это не работает на моем компьютере, может быть, я чего-то не хватает??

2. Вы включили библиотеку jquery? Вы можете найти это здесь: jQuery И вы заметили идентификатор в таблице и имена в элементах выбора?

3. Вы должны добавить <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> перед </body> в вашем скрипте. Или в <head> .

4. должен ли я включать библиотеку jquery?? я пытаюсь точно так же, как ваш код, сэр