HTMLテーブルフィルタは複数のフィルタをフィルタリングしません

Question

フィルタは個別のフィルタとしてのみ正しく動作します。すなわち、ユーザが「パッケージ」をフィルタリングする場合、必要に応じてフィルタリングします。

正しい結果を返すのではなく、2つ以上のフィルタでフィルタリングする場合は、最後にフィルタリングされた結果が返されます つまり、パッケージでフィルタリングする場合：Silver and Nights：3、

必要条件は、ユーザーが選択したすべてのフィルタに基づいて正確な結果を返すことです。 、 『数人の』入力値1、2を使用してフォームのドロップダウンした場合、それはボーナスだろう2292.

-

年代には、ライン65からのもの - 67とライン2243からです3、4、しかし、これは現時点での要件ではありません。貼り付けるには大きすぎる

コード、彼らはほとんど同じに見えるので、あなたがしたい1に3つの機能を組み合わせたかもしれないリンクTable 1

Answer 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コードにpolyfill。 （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; 
    } 
    }; 
}