0

Имеется простая html таблица, в ней содержатся строки с классами по городам.

<td>
    <tr class="spb"></tr>
    <tr class="moscow"></tr>
</td>

Имеются кнопки, при клике на которые скрываются строки c определённым городом через display: none;.

// начало кнопка для скрытия всех объявлений по СПБ
$('#hide-moscow').change(function(){
    if(this.checked){
        $('tr.moscow').addClass('hide-moscow');
    } else {
        $('tr.moscow').removeClass('hide-moscow');
    }
});

Некоторые строки динамически подгружаются через AJAX и добавляются в DOM - дерево, но уже без свойства display: none;.

Вопрос: как с помощью JQuery реализовать автоматическое скрытие вновь добавившихся строк (при условии, что кнопка для скрытия нажата)?

1 ответ 1

1

Я бы предложил более унифицированную версию. В любом случае - после ajax нужно еще раз проверку совершать

JS:

$('#hide-moscow').change(function(){
    hideCity('moscow');
});

$('#hide-spb').change(function(){
    hideCity('spb');
});

$.ajax({
    success: function(msg){
        $('table').append('<tr class="moscow"><td>Москва</td></tr>')
        // После успешного ajax и добавления в таблицу новых данных - еще раз вызываем функцию.
        hideCity('moscow');
    }
});

// создаем функцию, которая умеет принимать параметры (город)
function hideCity(city){
    t = $('#hide-'+city);
    if (t.is(':checked')){
        $('tr.'+city).addClass('hide');
    } else {
        $('tr.'+city).removeClass('hide');
    }
}

CSS:

tr.hide {display:none;}

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.