Search using Javascript only in all table fields

Question

The script which I will post just below copied from the answer to that question: Static search list using Javascript instead of PHP, that was made here in the community.

    window.onload=function(){
    var filtro = document.getElementById('filtro-nome');
    var tabela = document.getElementById('lista');
    filtro.onkeyup = function() {
        var nomeFiltro = filtro.value;
        for (var i = 1; i < tabela.rows.length; i++) {
            var conteudoCelula = tabela.rows[i].cells[0].innerText;
            var corresponde = conteudoCelula.toLowerCase().indexOf(nomeFiltro) >= 0;
            tabela.rows[i].style.display = corresponde ? '' : 'none';
        }
    }
}

Straight to the point! I need you to search all the book names of the table (66 books), meeting the criteria posted only part of the code just below, however is only searching for the first name, I think it is because the script searches the line (Rows), and I do not know how to search in the other fields, If I type Judges or Ruth for example... do not seek! You can see here if you want.

        <table id="lista" class="degrade-tbl">
            <thead>
                <tr>
                    <th><div>Pesquisa</div><div><input id="filtro-nome"/></div>
        </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><a href="">Gênesis</a></td>
                    <td><a href="">Êxodo</a></td>
                    <td><a href="">Levítico</a></td>
                    <td><a href="">Números</a></td>
                </tr>
                <tr>
                    <td><a href="">Deuteronômio</a></td>
                    <td><a href="">Josué</a></td>
                    <td><a href="">Juízes</a></td>
                    <td><a href="">Rute</a></td>
                </tr>
        </tbody>
    </table> 

I found this script in Jquery, but in Github only allows HTML, CSS, Java Script. Could someone please help me?

Thanks in advance - Thank you!

My project is on Github as: bible, in case you want to take a look!

Do not forget that JESUS will return to seek all those who believe! Meditate on the word of Jesus in the gospel of John chapter 14.

Stay with God!

PEACE!

Answer 1

You can do it like this:

const input = document.getElementById('filtro-nome');
const trs = [...document.querySelectorAll('#lista tbody tr')];

input.addEventListener('input', () => {
  const search = input.value.toLowerCase();
  trs.forEach(el => {
    const matches = el.textContent.toLowerCase().includes(search);
    el.style.display = matches ? 'block' : 'none';
  });
});

<table id="lista" class="degrade-tbl">
  <thead>
    <tr>
      <th>
        <div>Pesquisa</div>
        <div><input id="filtro-nome" /></div>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><a href="">Gênesis</a></td>
      <td><a href="">Êxodo</a></td>
      <td><a href="">Levítico</a></td>
      <td><a href="">Números</a></td>
    </tr>
    <tr>
      <td><a href="">Deuteronômio</a></td>
      <td><a href="">Josué</a></td>
      <td><a href="">Juízes</a></td>
      <td><a href="">Rute</a></td>
    </tr>
  </tbody>
</table>