Javascriptで表の行をフィルタリングする方法は？

Question

jQueryコードをJavascriptに変換しています。そして、私は本当にこれを解決する必要があります。

私はテキスト入力と多くの行を持つテーブルを持っています。テキストを入力すると、テーブル行をフィルタリングして、テーブル内の一致するコンテンツ行のみを表示する必要があります。

画像は間違ったものです。これは、表に2.55バージョンのみを表示する必要があります。 jQueryコードは正常に動作しています。 jQueryコードを見てください。

$('#release-filter').keyup(function() { 
    var $rows = $('.table-release tr'); 
    var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase(); 
    $rows.show().filter(function() { 
     var text = $(this).text().replace(/\s+/g, ' ').toLowerCase(); 
     console.log(text); 
     return !~text.indexOf(val); 
    }).hide(); 
}) 

私は値を得るためにしか達成できませんでした。私はフィルター機能を構築することができません。

const releaseFilter = document.querySelector('#release-filter') 

releaseFilter.addEventListener('keyup', function(event) { 
    const rows = document.querySelectorAll('.table-release tr'); 
    const enteredKey = event.target.value.replace(/ +/g, ' ').toLowerCase(); 
    const filteredRows = Array.prototype.filter.call(rows, function(enteredKey){return enteredKey}) // I need help here 

}) 

私は必要に応じてテーブル構造を提供できます。

Answer 1

コードを試してみてください。これがあなたを助けることを願っています。

table, 
 
th, 
 
td { 
 
    border: 1px solid black; 
 
    border-collapse: collapse; 
 
} 
 

 
th, 
 
td { 
 
    padding: 10px; 
 
}

<input type="text" id="release-filter" /> 
 
<br/> 
 
<br/> 
 
<table class="table-release"> 
 
    <tr> 
 
    <td style="width:20px">1</td> 
 
    <td style="width:50px">test</td> 
 
    </tr> 
 
    <tr> 
 
    <td style="width:20px">2</td> 
 
    <td style="width:50px">check</td> 
 
    </tr> 
 
</table> 
 
<script> 
 
const releaseFilter = document.querySelector('#release-filter') 
 
releaseFilter.addEventListener('keyup', function(event) { 
 
    const rows = document.querySelectorAll('.table-release tr'); 
 
    const enteredKey = event.target.value.replace(/ +/g, ' ').toLowerCase(); 
 
    const filteredRows = Array.prototype.filter.call(rows, 
 
    function(row) { 
 
     var text = row.innerText.trim(); 
 
     if (text.indexOf(enteredKey) == -1) { 
 
     row.style.display = "none"; 
 
     return true; 
 
     } else 
 
     row.style.display = "block"; 
 
    }) 
 

 
}); 
 
</script>