javascript - 使用 jquery 进行项目搜索时表损坏

Question

我编写了一个用于在表中搜索数据的jquery，代码可以工作，但表已更改。如何保持搜索键匹配的整行

谁能告诉我一些解决方案

这是我的 jquery 代码

$('#resultSearch').bind('keyup', function() {
            var s = new RegExp(this.value);
            $('#ricGridTable td').each(function() {
                if(s.test(this.innerHTML)) $(this).show();
                else $(this).hide();
            });
        });

Answer 1

.hide() 正在破坏表格，因为它将 td 设置为 display:none;。

改为使用 visibility:hidden css 属性，并使用 visibility:visible 再次显示。

这是在 jQuery 中使用 .css() 方法完成的 $(this).css('visibility', 'hidden');

$('#resultSearch').bind('keyup', function() {
  var s = new RegExp(this.value);
  $('#ricGridTable td').each(function() {
    if(s.test(this.innerHTML)) $(this).css('visibility', 'visible'); // Show
    else $(this).css('visibility', 'hidden'); // Hide
  });
});

但是 @HB Kautil 指出您应该隐藏行 tr 而不是单元格 (td)。在这种情况下， .hide() 将完成这项工作。

$(this).parents('tr').hide();