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表格過濾器不過濾多個過濾器

回答

相關問題