如何使用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>