HTML表格过滤器不过滤多个过滤器

过滤器只能作为单独的过滤器正常工作，即如果用户在“包”中过滤，它将根据需要进行过滤，或者如果用户过滤“夜晚”，将根据需要进行过滤。HTML表格过滤器不过滤多个过滤器

如果用户希望通过两个或多个过滤器来过滤，而不是返回正确的结果，它会返回结果最后只能即过滤如果用户过滤器的包装：银之夜：3，它应该返回四个结果，而不是12.

要求是根据用户选择的所有过滤器返回确切的结果。

在“s是线65 - 67和从线2243 - 2292

这将是一个奖金如果‘人数’输入是一个下拉形式使用值1，2， 3，4，但这不是要求。

代码太大贴，见链接Table 1

来源

2017-01-04 user2327626

你可能想结合3个功能为1，因为它们看起来几乎一模一样。

function filter() { 
    var filter_package = document.getElementById("myInput").value.toUpperCase().trim(); 
    var filter_num_nights = document.getElementById("myInput1").value.toUpperCase().trim(); 
    var filter_num_people = document.getElementById("myInput2").value.toUpperCase().trim(); 

    var rows = document.querySelectorAll("tr"); 

    // First few rows are headers 
    for (var i = 2; i < rows.length; i++) { 
     var items = rows[i].querySelectorAll("td"); 
     if (items.length === 0) continue; 

     var pkg = items[0]; 
     var night = items[1]; 
     var people = items[2]; 

     var package_text = pkg.innerHTML.toUpperCase().trim(); 
     var night_text = night.innerHTML.toUpperCase().trim(); 
     var people_text = people.innerHTML.toUpperCase().trim(); 

     if (package_text.includes(filter_package) && 
      night_text.includes(filter_num_nights) && 
      people_text.includes(filter_num_people)) { 
      rows[i].style.display = ""; 
     } else { 
      rows[i].style.display = "none"; 
     } 
    } 
}

，并修改了输入框像下面的KEYUP事件：

<input type="text" id="myInput" onkeyup="filter()" placeholder="Search for Packages.." title="Type in a Package name"> 
<input type="text" id="myInput1" onkeyup="filter()" placeholder="Search for Number of Nights.." title="Type in Number of Nights"> 
<input type="text" id="myInput2" onkeyup="filter()" placeholder="Search for Number of People.." title="Type in Number of People">

请注意

如果你的浏览器不支持string.includes天真，那么你可以复制并粘贴以下填充到您的JavaScript代码中。（ref：https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/String/includes）：

if (!String.prototype.includes) { 
    String.prototype.includes = function(search, start) { 
    'use strict'; 
    if (typeof start !== 'number') { 
     start = 0; 
    } 

    if (start + search.length > this.length) { 
     return false; 
    } else { 
     return this.indexOf(search, start) !== -1; 
    } 
    }; 
}

来源

2017-01-05 00:05:28 Eddie

HTML表格过滤器不过滤多个过滤器

回答

相关问题