Показать все скрытые строки таблицы при выборе пустой опции в поле выбора

Question

Показать все скрытые строки таблицы при выборе пустой опции в поле выбора

0

Пока мой код работает нормально, но когда я выбираю параметр " empty select option, все строки в моей таблице должны быть видны (другими словами, снова перезагружать таблицу в исходное состояние). Как мне это сделать?

Я видел это (JQuery Selector для таблицы со скрытой строкой - альтернативная раскраска строк), но не мог применяться к моей структуре.

благодаря

Jquery:

    $(document).ready(function()
    {
        $("#cars").change(function()
        {
            var selected = $(this).val();

            if (selected != '')
            {
                var values = $.map($('#cars>option'), function(e) { return e.value; });

                values.forEach(function(item)
                {
                    if (item != '')
                    {
                        if (selected == item)
                        {
                            $('.' + item).show();
                        }
                        else
                        {
                            $('.' + item).hide();
                        }
                    }
                    else
                    {
                        //Show all rows
                    }
                });
            }
        });
    });

HTML:

<table border="1">
            <tr id="header">
                <td>1</td>
                <td><select id="cars">
                    <option value=""></option>
                    <option value="bmw">BMW</option>
                    <option value="audi">AUDI</option>
                    <option value="mercedes">MERCEDES</option>
                </select></td>
            </tr>
            <tr class="bmw">
                <td>3.16</td>
                <td>BMW</td>
            </tr>
            <tr class="bmw">
                <td>3.18</td>
                <td>BMW</td>
            </tr>
            <tr class="bmw">
                <td>3.00</td>
                <td>BMW</td>
            </tr>
            <tr class="audi">
                <td>A1</td>
                <td>AUDI</td>
            </tr>
            <tr class="audi">
                <td>A3</td>
                <td>AUDI</td>
            </tr>
            <tr class="mercedes">
                <td>300sel</td>
                <td>MERCEDES</td>
            </tr>
        </table>

BentCoder 05 июнь 2014, в 21:08

Источник

Теги:

javascript

jquery

3 ответа

0

Ваш код излишне сложный. Вам не нужна map, foreach и т.д.

$("#cars").change(function()
 {
   $('tr[id!=header]').hide()
   if (this.value)
     $('.' + this.value).show()
   else
     $('tr').show()
  }
)

punund 05 июнь 2014, в 17:55

0

просто поместите это:

$(this).closest('table').find('tr:hidden').show();

Хотя вы можете упростить свой код следующим образом:

$("#cars").change(function(){
   $(this).closest('table').find('tr:gt(0)').hide();
   this.value !== '' ? $('.'+this.value).show() : $(this).closest('table').find('tr:hidden').show();
});

Jai 05 июнь 2014, в 17:15

Ещё вопросы

Bhavik · Accepted Answer · 2014-06-05T17-26-00.000Z

Working Fiddle
Добавьте эту часть в свой код

else {
    $('table tr').show();
}

@MadMax, показывающий trs глобально, не является хорошей идеей все же.
Я назначил id таблице и делаю это сейчас: $('#table1 tr').show();