Question

我正在尝试在search中实施table功能。这里出了点问题，把搜索（过滤器）只考虑表的最后column。

任何人都可以帮我找出问题吗？

这是现场直播：

我的js：

var table = $('table');
$('#search').keyup(function () {
    var tdText = table.find('tbody tr').find('td');
    var text = $.trim($(this).val());
    if(!text){
        table.find('tbody tr').show();
    };
    tdText.filter(function() {
        var reText = $(this).text();

        if (reText.indexOf(text) >= 0) {
            $(this).parent('tr').show();
        }

        else if (reText.indexOf(text) < 0) {
            $(this).parent('tr').hide();
        }

    });
});

Answer 1

因为当您遍历每个td时，如果文本不匹配则隐藏tr，因此当您迭代最后td时，如果文本不匹配则隐藏行<{1}} / p>

var table = $('table');
$('#search').keyup(function () {
    var tdText = table.find('tbody tr').find('td');
    var text = $.trim($(this).val());
    if(!text){
        table.find('tbody tr').show();
    }else{
        table.find('tbody tr').hide();
        tdText.filter(function() {
            var reText = $(this).text();
            return reText.indexOf(text) >= 0;
        }).parent().show();
    }
});

演示：Fiddle

我认为你可以将其简化为

var table = $('table'), $trs = table.find('tbody tr');
$('#search').keyup(function () {
    var tdText = table.find('tbody tr').find('td');
    var text = $.trim($(this).val());
    if(!text){
        $trs.show();
    }else{
        $trs.hide().has('td:contains('+text+')').show();
    }
});

演示：Fiddle

Answer 2

var tdText = table.find('tbody tr').find('td');

会找到多个td＆＃39。这一行循环遍历元素，并将tdText替换为下一列，直到到达最后一列。

解决方案是循环自己

＆＃13;

var tablecells = $('table tbody tr').find('td');
var rowText = "";
$(tablecells).each(function() {
    rowText = rowText + trim($(this).val());
});

＆＃13;

Answer 3

您正在浏览所有 td的所有 tr，但每个 td您根据td的搜索结果显示或隐藏父行 - 因此，自然只有 last td检查的结果才是“幸存”的结果每一行。

首先，您需要拆分循环，将所有 td的所有 tr一次性转换为两个嵌套循环 - 一个位于tr之上，另一个位于该行的所有td之内。

然后你应该设置一个标志来确定是否在行中的td的任何中找到了某些东西 - 然后在最后，你显示或隐藏基于的行那面旗帜。

var table = $('table');
$('#search').keyup(function () {
    var text = $.trim($(this).val());
    if(!text){
        table.find('tbody tr').show();
    }
    else {
      var rows = table.find('tbody tr');

      rows.each(function() {
         var cells = $(this).find('td'),
             found = false;

         cells.each(function(j, cell) {
            if($(this).text().indexOf(text) >= 0) {
              found = true;
            }
         });

         if(found) {
           $(this).show(); // this is here the row again
         }
         else {
           $(this).hide();
         }    
      });
    }
});

未经测试 - 但这些方面的内容应该有效。

请注意，我在这里用.filter替换了.each - 您对前者的使用没有多大意义，因为您在这里实际上没有进行任何过滤（这需要你的回调函数为每个元素返回true或false。）

`search`文本只考虑表中的最后一列

3 个答案: