Estou fazendo um bingo simples utilizando html, css, ajax e JS.
Os elementos da tabela, são trazidos a partir de uma requisição, dentro de um array e posicionados na table(...).
Utilizando a função onclick, pego um número aleatório por outra requisição, a meta é, quando o número sorteado for igual a um dos números presentes na tabela, a posição do número receba um 'X', ou qualquer outra coisa que o marque.
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();
}