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

试试这个，

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

Answer 2

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

而是使用visibility:hidden css属性，然后使用visibility:visible再次显示。

这是使用.css()方法$(this).css('visibility', 'hidden');

在jQuery中完成的

$('#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();

使用jquery进行项目搜索时，表格正在崩溃

2 个答案: