Question

我有一些数据存储在我希望使用Javascript过滤的表格中。我在输入字段中键入我的过滤字符串，并仅显示匹配的行。但是现在，我想这样做：例如，如果我在我的过滤器字段中输入value1|value2，我只想要与这两个字符串匹配的行（value1 AND value2）。我已经尝试了很多方法来做到这一点，但没有人能做到我想要的......

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

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";
        }        
    }

}

有没有办法让这段代码适应我的想法？

Answer 1

但是现在，我想这样做：例如，如果我输入我的过滤器字段中的“value1 | value2”，我只想要与之匹配的行这2个字符串（value1 AND value2）。

您需要将逻辑更改为（评论内联）

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";
        }        
    }
}

具有多个值的表过滤

1 个答案: