How to highlight a table element from the JS

Question

I am making a simple bingo using html, css, ajax and JS.

Table elements are brought from a request, within an array and placed in the table(...).

Using the onclick function, picked a random number by another request, the goal is, when the drawn number is equal to one of the numbers present in the table, the position of the number receives an 'X', or anything else that marks it.

HTML

<button type="button" id="preencher" onclick="preencherATabela()">Preencher Tabela</button>
<table border='1' id="table1">

<thead>
    <tr>
        <th colspan="5">Cartela</th>

    </tr>
</thead>   

<tbody>
</tbody>
</table>

<button type="button" id="jogar" onclick="sortearNumero()">Sortear Nº</button>

<table border="1px" id="table2">

    <thead>
        <tr>
            <th>Números Sorteados</th>
        </tr>
    </thead>
    <tbody>

    </tbody>
</table>

<link rel="stylesheet" href="style.css">
<script src="script.js"></script>

JS

let buttonPreencherTabela = document.getElementById("preencher")
let buttonSortearNumero = document.getElementById("jogar")
let tabela = document.getElementById("table1")
let tbody1 = tabela.getElementsByTagName("tbody")[0]
let tabelaNumerosSorteados = document.getElementById("table2")
let tbody2 = tabelaNumerosSorteados.getElementsByTagName("tbody")[0]

tbody1.innerHTML = `<tr><td></td><td></td><td></td><td></td><td></td></tr>
                <tr><td></td><td></td><td></td><td></td><td></td></tr>
                <tr><td></td><td></td><td></td><td></td><td></td></tr>
                <tr><td></td><td></td><td></td><td></td><td></td></tr>
                <tr><td></td><td></td><td></td><td></td><td></td></tr>`

function preencherATabela(){
buttonSortearNumero.style.visibility = "visible"
buttonPreencherTabela.style.visibility = "hidden"
let Numeros = new Array;

var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {

                Numeros = JSON.parse(this.responseText);
                console.log(Numeros);
                tbody1.innerHTML = ' '

                for(let i = 0; i < 20; i++){

                   tbody1.innerHTML += `<tr> <td> ${Numeros[i]} </td> <td> ${Numeros[i+1]} </td> <td> ${Numeros[i+2]} </td> <td> ${Numeros[i+3]} </td> <td> ${Numeros[i+4]} </td>  </tr>`;
                    i+=3
                }   

            }
        };
        xhttp.open("GET", "dados.php", true);
         xhttp.send();



      }

      function sortearNumero(){

      let Numerosorteado;

      var xhttp = new XMLHttpRequest();
       xhttp.onreadystatechange = function() {
       if (this.readyState == 4 && this.status == 200) {

       Numerosorteado = this.responseText;
       console.log(Numerosorteado);

       tbody2.innerHTML += `<tr><td>${Numerosorteado}</td></tr>`;



            }
             }
         xhttp.open("GET", "dados2.php", true);
         xhttp.send();


          }

https://i.stack.Imgur.com/Uuxfe.png

Answer 1

You can scan the table cells by looking for the text that matches the drawn number.

Create a class in CSS that changes the cell background color to red, for example:

.marcado{
   background-color: red;
}

In Javascript you add the class .marcado in the cell combining:

const celulas = tabela.querySelectorAll("tbody td");
for(let c of celulas){
   if(c.textContent.trim() == Numerosorteado){
      c.classList.add("marcado");
   }
}

Place the code above after the line Numerosorteado = this.responseText;.

To know when all cells have been marked, just count how many cells have the class .marcado:

const marcados = tabela.querySelectorAll("tbody td.marcado").length;
if(marcados == 25){
   alert("acabou");
}

The code above you place after the line tbody2.innerHTML += ...;

See that you will compare the variable marcados to the number of cells, which are 25 in total. If this number 25 is to vary, then you need to count the number of cells in the table:

const total_celulas = tabela.querySelectorAll("tbody td").length;
const marcados = tabela.querySelectorAll("tbody td.marcado").length;
if(marcados == total_celulas){
   alert("acabou");
}