удалить строку, когда элемент в таблице найден

Question

Я хочу удалить строку, где текст не найден, если флажок снят. Если флажок установлен, то таблица должна вернуться в исходное состояние. Что вы можете порекомендовать?

function keySearch() { 
     $('#search').keyup(function (e) { 
      var search = $(this).val(); 
      $('td').removeClass('found'); 
      $('td').each(function (index, element) { 
       if ($(element).html() == search) { 
        $(element).addClass('found'); 
       } 
       if (!$('#checkbox').prop('checked', true)) { 
        $(element).parent().hide(); 
       } 
       else 
       { 
        $(element).parent().show();//how replace remove row? 
       } 
      }); 
     }); 
    } 

Answer 1

Вместо использования JavaScript для отображения и скрытия строки, вы можете использовать его, чтобы добавить или удалить класс .checked CSS на родительской таблице. Затем установите класс .found, чтобы он скрывал только строки, если присутствует класс .checked. Вам нужно будет добавить класс .found в строки вместо ячеек, чтобы это работало. Просто добавьте .parent() до .addClass('found') в свой код. Также избавьтесь от кода ниже вашего первого if.

Вот то, что CSS будет выглядеть следующим образом:

table.checked > * > tr.found { 
    display: none; 
} 

дополнительный код необходимо будет сделать флажок работы. Вот как сделать это с простой ПР»JavaScript (извините, я не использую JQuery много):

document.querySelector('#checkbox').addEventListener('click', function(e) { 
    if(e.target.checked) 
    document.querySelector('#table').classList.add('checked'); 
    else 
    document.querySelector('#table').classList.remove('checked'); 
}); 

(Это предполагает, что ваша таблица имеет идентификатор„таблицы“).