-1

Ao clicar no botão, eu quero mudar a cor da linha de uma tabela HTML caso ela tem o mesmo valor que minha caixa de texto. Minha tabela:

<table id="tablefc" border="4">
        <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Age</th>
        </tr>
        <tr>
            <td>Frank</td>
            <td>Nenjim</td>
            <td>19</td>
        </tr>
        <tr>
            <td>Alex</td>
            <td>Ferreira</td>
            <td>23</td>
        </tr>
        <tr>
            <td>Bill</td>
            <td>Airman</td>
            <td>30</td>
        </tr>
        <tr>
            <td>Ali</td>
            <td>Bergen</td>
            <td>27</td>
        </tr>
       </table>      


    <input type="text" id="searchtxt">
    <button onclick="findcolor()">Find and color the row</button>


Meu codigo Javascript

function findcolor()
{
    var srch = document.getElementById("searchtxt").value; 
    var index, localizado;

    for(var i=1; i < tablefc.rows.length; i++)
        {
            if (srch === tablefc.rows[i].cells[1].innerHTML)
                {
                    console.log('found');
                    document.getElementById("searchtxt").value = localizado
                } else {
                    console.log('not found');
                }
        }

2 Respostas 2

2

Uma possibilidade é usar querySelectAll() no documento para selecionar todas linhas da sua tabela em um array, então remover o titulo com Array.prototype.shift() e das linhas que sobrarem itere por cada célula fazendo a comparação com o texto no <input>:

function findcolor() {
  //Pega o texto do <input> e joga para maiúscula objetivando a posterior comparação case-insensitive
  let srch = document.getElementById("searchtxt").value.toUpperCase();
  //Seleciona as linhas da tabela em um array
  let rows = [...document.querySelectorAll('#tablefc tr')];
  //Descarta o título da tabela
  rows.shift();
  //Para cada linha da tabela
  rows.forEach((item) => {
    item.style.backgroundColor = 'white'; // Restaura a cor de fundo 
    //Quebra a linha em células e itera sobre elas 
    [...item.querySelectorAll(`td`)].forEach((column) => {
      //Faz a comparação case-insensitive entre o texto da célula e o texto do <input>
      if (column.innerText.toUpperCase() == srch) {
        //Se a comparação por positiva...
        item.style.backgroundColor = 'yellow'; // ..marca a linha
      }
    });
  });
}
tr {
  background-color: white;
}
<table id="tablefc" border="4">
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Frank</td>
    <td>Nenjim</td>
    <td>19</td>
  </tr>
  <tr>
    <td>Alex</td>
    <td>Ferreira</td>
    <td>23</td>
  </tr>
  <tr>
    <td>Bill</td>
    <td>Airman</td>
    <td>30</td>
  </tr>
  <tr>
    <td>Ali</td>
    <td>Bergen</td>
    <td>27</td>
  </tr>
</table>


<input type="text" id="searchtxt">
<button onclick="findcolor()">Find and color the row</button>

Outra possibilidade é fazer fazer uma busca com XPath fazendo uso do método document.evaluate() retornando um instantâneo ordenado do DOM relativo a sua tabela:

//Pega a tabela para posterior consulta
let table = document.getElementById("tablefc");

function findcolor() {
  //Pega o texto do <input> objetivando a posterior comparação case-sensitive
  let sch = document.getElementById("searchtxt").value;
  // Busca por todas a linhas da tabela menos o cabeçalho e itera por elas
  findNodes(`//tr[position()>1]`).forEach((element) => {
    element.style.background = 'white'; //Restaura a cor de fundo
  });
  // Busca por todas a células da tabela, cujo o texto seja igual do <input>, menos as do cabeçalho e itera por elas
  findNodes(`//tr[position()>1]/td[text() = "${sch}"]`).forEach((element) => {
    element.parentElement.style.background = 'red' //Ajusta a cor de fundo da linha
  });
}

function findNodes(searchtxt) {
  let result = []; 
  //Avalia a expressão XPath passada em searchtxt e tira instantâneo do DOM
  let nodes = document.evaluate(searchtxt, table, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
  //Itera pelos instantâneos
  for (let i = 0; i < nodes.snapshotLength; i++) {
    result.push(nodes.snapshotItem(i)); //Adiciona cada um deles ao resultado
  }
  return result;
}
tr {
  background-color: white
}
<table id="tablefc" border="4">
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Frank</td>
    <td>Nenjim</td>
    <td>19</td>
  </tr>
  <tr>
    <td>Alex</td>
    <td>Ferreira</td>
    <td>23</td>
  </tr>
  <tr>
    <td>Bill</td>
    <td>Airman</td>
    <td>30</td>
  </tr>
  <tr>
    <td>Ali</td>
    <td>Bergen</td>
    <td>27</td>
  </tr>
</table>

<input type="text" id="searchtxt">
<button onclick="findcolor()">Find and color the row</button>

1

Primeiro de tudo, no seu código você percorre todas as linhas porém não percorre todas as colunas, ao invés disso, você verifica apenas a coluna de índice 1.

Logo, você nunca conseguiria achar o valor 19 que se encontra da coluna de índice 2 ou o nome Frank que se encontra no primeiro índice por exemplo.

O que você deve fazer então é criar dois laços de repetição for para procurar o valor em cada coluna de cada linha da sua tabela. Veja abaixo como ficaria a estrutura:

for (let row = 1; row < tablefc.rows.length; row++){
    for (let column = 0; column < tablefc.rows[row].cells.length; column++){

        let item = table.rows[row].cells[column];

        if (item.innerText == search){
            // Código...
        }
    }
}

Para alterar o estilo de um elemento com JavaScript, você deve utilizar o atributo style com a propriedade que deseja alterar.

Sendo assim, atribua a cor que deseja utilizando a propriedade style.background. Exemplo:

elemento.style.background = "#ff0";  // Eu também poderia colocar "rgb(255, 255, 0)"

Abaixo está o código que eu fiz que atende à sua necessidade:

function findcolor(){

    var search = document.getElementById("searchtxt").value; 
    var table = document.getElementById("tablefc");

    for (let row = 1; row < tablefc.rows.length; row++){

        for (let column = 0; column < tablefc.rows[row].cells.length; column++){

            let item = table.rows[row].cells[column];
            let parent = item.parentElement;

            if (item.innerText == search){
                parent.style.background = "#f00"; // Pinta a linha encontrada de vermelho.
                break;
            }

            parent.style.background = "#fff"; // Pinta de branco se não for a linha correta.
        } 
    }
}

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .