Как показать или скрыть tr с помощью jQuery?

Это может не иметь никакого отношения к тому факту, что я работаю с строкой таблицы, но это моя проблема: у меня есть меню выбора. Некоторые из этих параметров должны при выборе скрывать строку таблицы в моей форме. Другие будут показывать ту же строку таблицы. С моим текущим скриптом TR никак не затрагивается, однако я знаю, что он реагирует на щелчок или выбор, потому что я регистрирую это событие в консоли. Другая проблема заключается в том, что консоль регистрируется, когда что-либо выбрано в меню (например, стрелка). Я хочу, чтобы tr отображался/скрывался только тогда, когда опция действительно выбрана. Надеюсь, я достаточно ясно выразился по этому поводу.

Мой jQuery:

$('[rel="toggleElement"]').ready(function(){

        $(this).on('click', function(){

            var elem = $(this).data('elem-id');
            elem = $('.'+elem);

            if($(this).data('elem-status') == 'show'){

                elem.show();

            }
            if($(this).data('elem-status') == 'hide'){

                elem.hide();

            }

            console.log('An element was toggled!');         

    });

});

Вот мой источник HTML:

<table align="center" width="100%" cellspacing="1" cellpadding="5" border="0">
                    <tr>
                        <td align="center" colspan="2" class="row1"><h1>Article Info</h1></td>
                    </tr><tr>
                        <td align="right" width="30%" class="row2"><label>Article Title</label></td>
                        <td align="left" width="70%" class="row2"><input type="text" name="title" size="30" class="text-input" value="Max: The Curse of Brotherhood Review"></td>
                    </tr><tr>
                        <td align="right" width="30%" class="row2"><label>Category</label></td>
                        <td align="left" width="70%" class="row2"><select name="category_id">
                              <option value="1" rel="toggleElement" data-elem-id="platforms" data-elem-status="hide">Base Command News</option>
                              <option value="4" rel="toggleElement" data-elem-id="platforms" data-elem-status="show">Gaming Articles</option>
                              <option value="8" rel="toggleElement" data-elem-id="platforms" data-elem-status="hide">Resources</option>
<option value="2" rel="toggleElement" data-elem-id="platforms" data-elem-status="hide">Staff Intel</option>
                             <option value="7" rel="toggleElement" data-elem-id="platforms" data-elem-status="hide">Tutorials</option>
                             <option value="10" rel="toggleElement" data-elem-id="platforms" data-elem-status="hide">---Clan Websites</option>
                             <option value="9" rel="toggleElement" data-elem-id="platforms" data-elem-status="hide">---Game Servers</option>
</select></td>
                    </tr><tr class="platforms">
                        <td align="right" width="30%" class="row2"><label>Platform(s)</label></td>
                        <td align="left" width="70%" class="row2">Nintendo <input type="checkbox" name="platforms[]" value="3"  />&nbsp;&nbsp;&nbsp;PC <input type="checkbox" name="platforms[]" value="4"  />&nbsp;&nbsp;&nbsp;PlayStation <input type="checkbox" name="platforms[]" value="2"  />&nbsp;&nbsp;&nbsp;Xbox <input type="checkbox" name="platforms[]" value="1"  />&nbsp;&nbsp;&nbsp;</td>
                    </tr>

PS: я не хочу использовать toggle(), потому что только некоторые параметры отображаются, а другие только скрываются.

ТИА!


hide jquery show tr
person ShoeLace1291    schedule 25.06.2014    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Это можно сделать с помощью события "change"

$(document).ready(function () {
    $('.platforms').hide();
    $(document).on('change', 'select[name="category_id"]', function () {
        var $selectedOption = $(this).find("option:selected");
        var elem = $selectedOption.data('elem-id');
        elem = $('.' + elem);

        if ($selectedOption.data('elem-status') == 'show') {
            elem.show();
        }
        if ($selectedOption.data('elem-status') == 'hide') {
            elem.hide();
        }

        console.log('An element was toggled!');
    });
});

демонстрация jsfiddle

person frosdqy    schedule 25.06.2014
comment
Это потрясающе! Спасибо! - person ShoeLace1291; 25.06.2014

arrow_upward
1
arrow_downward

Используйте jQuery change() для выбора тега и получения пользовательских атрибутов (идентификатор элемента данных, статус элемента данных) выбранной опции.

$(document).ready(function(){
    if($('option:selected', 'select[name="category_id"]').data('elem-status') == 'hide') {
     $('.platforms').hide();
    }
    $('select[name="category_id"]').change(function(){
            var elem = $('option:selected', this).data('elem-id');
            var status = $('option:selected', this).data('elem-status');
            var class_target = $('.'+elem);
            if(status == 'show'){
                class_target.show();
            }
            if(status == 'hide'){
                class_target.hide();
            }
            console.log('An element was toggled!');         
    });

});

jsfiddle

person rails_id    schedule 25.06.2014