テーブル検索で複数のセルを表示する方法

Question

複数の要素を表示するためにこの検索バーのための方法があるのだろうかと思います。 "321" "1234" "123" "12345"のプールで "123"を検索すると今のように表示されます。表示される値は「1234」だけです。検索結果と一致するすべての値が表示されるようにしたいので、正しい検索結果が表示されます： "1234" "123" "12345"

いずれの回答もありがとうございます。

ここで私が持っている現在のコードです：

var cells = document.querySelectorAll("#myTable td"); 
 
var search = document.getElementById("myInput"); 
 

 
search.addEventListener("keyup", function() { 
 
if (search.value.length > 0 && search.value != '') { 
 
    for (var i = 0; i < cells.length; ++i) { 
 
     if  (cells[i].textContent.toLowerCase().indexOf(search.value.toLowerCase()) === 0) { 
 
      cells.forEach(function(element) { 
 
       element.style.display = "none"; 
 
      }); 
 
      cells[i].style.display = "table-cell"; 
 
      break; 
 
     } else { 
 
      cells.forEach(function(element) { 
 
       if (cells[i] !== element) { 
 
        element.style.display = "table-cell"; 
 
       } 
 
      }); 
 
     } 
 
    } 
 
} else { 
 
    cells.forEach(function(element) { 
 
     if (cells[i] !== element) { 
 
      element.style.display = "table-cell"; 
 
     } 
 
    }); 
 

 
} 
 
});

<input id="myInput"> 
 
<table id="myTable"> 
 
    <tr> 
 
     <td>321</td> 
 
     <td>123</td> 
 
    </tr> 
 
    <tr> 
 
     <td>1234</td> 
 
     <td>abc</td> 
 
    </tr> 
 
    <tr> 
 
     <td>12345</td> 
 
     <td>abcde</td> 
 
    </tr> 
 
</table>

Answer 1

があなたのcellsセレクタは、これがarrayishオブジェクトであるnodelistを返します。それはforEach機能を持っていません。

しかし、我々は、Arrayオブジェクトから借りることができます：私は他の問題を解決するためにやった

Array.prototype.forEach

は、ルックアップ配列としてindexArrayを作成することです。検索文字列を含むインデックスを追跡します。あなたは、細胞があることが含まれている表示したい場合は、我々はそれのものを回すことができるすべてのセルが参照配列コードの下

var cells = document.querySelectorAll("#myTable td"); 
 
var search = document.getElementById("myInput"); 
 

 
search.addEventListener("keyup", function() { 
 
    var indexArray = []; //look up array 
 
    for (var i = 0; i < cells.length; ++i) { 
 
     //restore the cells: 
 
     cells[i].style.display = "table-cell"; 
 
    
 
     //if search value is found the value will be 0 if it starts a the beginning 
 
     if (cells[i].textContent.toLowerCase().indexOf(search.value.toLowerCase()) === 0) { 
 
     indexArray.push(i); //push index into lookup 
 
     } 
 
    } 
 
    //loop over all cells 
 
    Array.prototype.forEach.call(cells, function(element, index) { 
 
     if (indexArray.indexOf(index) === -1) //if index is not present in look up, set display to none 
 
     element.style.display = "none"; 
 
    }); 
 

 
});

<input id="myInput"> 
 
<table id="myTable"> 
 
    <tr> 
 
    <td>321</td> 
 
    <td>123</td> 
 
    </tr> 
 
    <tr> 
 
    <td>1234</td> 
 
    <td>abc</td> 
 
    </tr> 
 
    <tr> 
 
    <td>12345</td> 
 
    <td>abcde</td> 
 
    </tr> 
 
</table>

Answer 2

に表示されないとき、私たちのループで十分ですサーチ;また、あなたは、これは素晴らしいですし、それを使用しますが、検索は、私は「1」と入力した場合、それはその結果だけを表示することをように動作しますので、それを作ることが可能であろうjsfiddle https://jsfiddle.net/bzcdomjs/

var cells = document.querySelectorAll("#myTable td"); 
var search = document.getElementById("myInput"); 
search.addEventListener("keyup", function() { 
    for (var i = 0; i < cells.length; ++i) { 
    cells[i].style.display = "table-cell"; 
    if (search.value.length > 0 && search.value != '') { 
      if(cells[i].textContent.toLowerCase().indexOf(search.value.toLowerCase()) === -1) { 
     cells[i].style.display = "none"; 
    } 
} 
});