Javascript 具有多个值的表筛选

我有一些数据存储在一个表中，我想使用Javascript进行过滤。我在输入字段中键入筛选字符串，并仅显示匹配的行。 但是现在，我想这样做：例如，如果我在我的过滤器字段中键入

value1 | value2

，我只需要与这两个字符串匹配的行（

value1和value2

）。我尝试了很多方法，但没有人能完全做到我想要的

下面是我用来过滤的示例（使用一个字符串）：

函数filterFromName（文本）{
//变数
var过滤器，tableData，tr，td，i；
filter=text.toUpperCase（）；
tableData=document.getElementById（'data_values'）；
tr=tableData.getElementsByTagName（'tr'）；
//对于每个表行，隐藏与搜索文本不匹配的内容
对于（i=0；i-1）
tr[i].style.display=“”；
其他的
tr[i].style.display=“无”；
}        
}
}

有没有办法使这段代码适应我想要的

但是现在，我想这样做：例如，如果我输入 “value1 | value2”在我的筛选器字段中，我只需要与匹配的行 这两个字符串（value1和value2）

您需要将逻辑更改为（注释内联）

函数filterFromName（文本）{
var表数据，tr，td，i；
var filterParams=text.toUpperCase（）.split（“|”）；//按|拆分以获取搜索参数数组
tableData=document.getElementById（'data_values'）；
tr=tableData.getElementsByTagName（'tr'）；
//对于每个表行，隐藏与搜索文本不匹配的内容
对于（i=0；i-1}）；//检查filterParam数组中是否有任何val与tdValue匹配
if（isMatched.length）//检查筛选结果集的长度
tr[i].style.display=“”；
其他的
tr[i].style.display=“无”；
}        
}
}

为什么不使用？那么，您想解析输入字符串以创建与数据匹配的查询？您想使用

|

作为And（与使用

+

相反，因为

|

是一个or）我只想使用我自己的代码，而不是JQuery插件；-）谢谢，这正是我想要的；-）@凯门塔里在这种情况下，请接受并投票支持帮助您的答案。

function filterFromName(text) {

    // Variables
    var filter, tableData, tr, td, i;
    filter = text.toUpperCase();
    tableData = document.getElementById('data_values');
    tr = tableData.getElementsByTagName('tr');

    // For each table row, hide those who don't match the search text
    for (i = 0; i< tr.length; i++) {
        td = tr[i].getElementsByTagName('td')[1]; // query the Alias column
        if (td) {
            if (td.innerHTML.toUpperCase().indexOf(filter) > -1)
                tr[i].style.display = "";
            else
                tr[i].style.display = "none";
        }        
    }

}

function filterFromName(text) {
    var tableData, tr, td, i;
    var filterParams = text.toUpperCase().split( "|" ); //split by | to get array of search parameters
    tableData = document.getElementById('data_values');
    tr = tableData.getElementsByTagName('tr');
    // For each table row, hide those who don't match the search text
    for (i = 0; i< tr.length; i++) {
        td = tr[i].getElementsByTagName('td')[1]; // query the Alias column
        if (td) {
            var tdValue = td.innerHTML.toUpperCase();
            var isMatched = filterParams.filter( function( val ){ return tdValue.indexOf( val ) > -1 }); //check if any val in filterParam array is matching the tdValue
            if ( isMatched.length ) //check length of filtered resultset
                tr[i].style.display = "";
            else
                tr[i].style.display = "none";
        }        
    }
}