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

您可以使用它在父表上添加或删除.checked CSS类，而不是使用JavaScript来显示和隐藏行。然后设置.found类，以便在.checked类存在时仅隐藏行。 您需要将.found类添加到行而不是单元格才能使其正常工作。只需在代码中.parent()之前添加.addClass('found')即可。另外，请删除第一个if语句下方的代码。

以下是CSS的样子：

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

需要一些额外的代码才能使复选框工作。以下是使用普通ol'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');
});

（这假设你的表的id为'table'）。

找到表中的元素时删除行

1 个答案: