Question

HTML页面上有一个表格和一个文本输入框。每当用户在框中键入值时，Javascript应该过滤表并仅显示在数据中具有值的行。

我已完成此部分，但主要问题是如果用户在框中键入空格然后键入另一个值，那么js应该过滤数据，其中所有单词（用空格分隔的文本）至少出现一次在该行的任何单元格中，就像谷歌的建议，但与表格。

有没有人有解决方案？

HERES THE CODE

for(var i=0; i < trs.length; i++ ) 
{       
    tds = trs[i].getElementsByTagName("td");
    //alert(tds );

    for( var j=0; j < tds.length; j++ )
    {
        if( hasWords )
        {
            for( k = 0; k < searchWords.length; k++ )
            {
                if( searchWords[k].toLowerCase() != "" && tds[j].innerHTML.toLowerCase().search( searchWords[k].toLowerCase() ) == -1 )
                {
                    found = false;
                    //foundRows.push(trs[i]);
                }
                else {
                    found = true;
                    foundRows.push(trs[i]);
                }
            }
        }
        else
        {
            if( searchText != "" && tds[j].innerHTML.toLowerCase().search( searchText.toLowerCase() ) != -1 )
            {
                found = true;
                foundRows.push(trs[i]);
            }
        }           

        /*
        if( tds[j].innerHTML.toLowerCase().search( searchText ) != -1 )
        {
            found = true;
            foundRows.push(trs[i]);
        }
        */
    }
}

Answer 1

第一种可能性

用同一个词做同样的事情。将用户的输入拆分为单独的单词并测试每个单词。

第二种可能性 - 优化过滤

遍历整个表似乎非常耗时，可以很容易地在开始时以较小的开销进行优化。由于javascript对象是一种关联数组，因此您可以这样做：

当页面加载遍历表并解析每个单元格的文本时。解析应该使用正则表达式来完成，因为它可以更简单地排除任何标点符号和类似的var rx = /([a-z]+)/gi。您也可以轻松地在此处列出任何单个字母单词var rx = /([a-z]{2,})/gi。
将每个单词存储在与行相关的关联对象中。
使用此对象进行过滤。

你的关联对象应该如何：

var data = {
    "tomorrow": [1, 2, 3],
    "will": [3, 5, 6],
    "be": [78],
    "sunny": [3, 9, 19],
    ...
};

每个单词的数组对应于表行索引。因此，当用户在文本框中输入任何数据时，您可以轻松地将其拆分为单独的单词并获取所有数组：

var filter = $("#search_filter").val().split(" ");
var firstWordRows = data[filter[0]];

然后你要做的就是与那些数组相交并隐藏除了结果之外的所有行。

好处是你可以定义 stop 你没有过滤的词（比如 in，a，the，of，at，等）......

为什么甚至打扰第二个？如果页面更有可能被过滤多次而不是被加载，那么页面加载时的这种开销将使你的过滤变得活泼。过滤速度非常快，处理器耗尽也很少。

建议

我强烈建议您使用一些Javascript库，这将使您的生活更加简单。例如，使用jQuery，它没有很长的学习曲线，并且可以与您可能拥有的现有脚本一起使用。

Answer 2

如果你已经使用了一个单词，只需在空格（input.split(" ")）上分割输入，然后以相同的方式过滤，除了检查每个单词。

如果您使用的是JS库，那肯定会更容易。

从HTML表中选择仅具有指定值的行？

2 个答案:

第一种可能性

第二种可能性 - 优化过滤

建议