Selecionando outras células com o mesmo conteúdo

by Rodrigo Portillo

HTML

<div class="area-tabela">

<table>
  <thead>
    <tr>
      <th>
        Valor 1
      </th>
      <th>
        Valor 2
      </th>
      <th>
        Valor 2
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Balão</td>
      <td>Cebola</td>
      <td>Balão</td>
    </tr>
    <tr>
      <td>Gnomo</td>
      <td>Cebola</td>
      <td>Páscoa</td>
    </tr>
    <tr>
      <td>Cebola</td>
      <td>Pimenta</td>
      <td>Azul</td>
    </tr>
    <tr>
      <td>Balão</td>
      <td>Páscoa</td>
      <td>Balão</td>
    </tr>
  </tbody>
</table>


</div>

CSS

body{
  font-family: sans-serif;
}
.area-tabela table{
  margin-top:20px;
  border-spacing: 0;
  border: 1px solid grey;
  width: 100%;
}

.area-tabela table td, .area-tabela table th{
  width:80px;
  padding: 5px 10px;
  font-size: 14px;
   cursor: pointer;
  
  transition: all .3s linear;
  -moz-transition: all .3s linear;
  -webkit-transition: all .3s linear;
}

.area-tabela table td:hover{
  background-color: lightyellow;
}

.area-tabela table th{
  background-color: grey;
  color: white;
  font-weight: normal;
}

.area-tabela table tr:nth-child(even) td{
  background-color: #efefef;

}

.area-tabela table tr td.highlight{
  background-color: #1361bf;
  color: white;
}

JavaScript

function highLightTd(word){
  document.querySelectorAll(".area-tabela table tr td").forEach((td)=>{
		if(td.innerHTML.trim().toLowerCase() == word.trim().toLowerCase()){
    	td.classList.add("highlight");
    }else{
    	td.classList.remove("highlight");
    }
  });
}
document.querySelectorAll(".area-tabela table tr td").forEach((td)=>{
	td.addEventListener("click", ()=>{
 		highLightTd(event.target.innerHTML);
  });
});