How to make the table more dynamic?

Asked

Viewed 36 times

0

I have to create a little game.

It’s a one-word table. The letters of the word will all be mixed and the user has to write the word correctly by clicking on each letter before the time ends.

I’m having trouble getting all the rows of the table to id, click on.

//CLICAR NA TABELA
//primeiro fazer uma função que tenha uma varia como parametro para receber o id da div 
//chamar no onclick cada div
$(document).ready(function(){
    $('table').click(function(){
        var id = $(this).attr("id");
        alert(id);
    });
});

//CONTAGEM REGRESSIVA
/*var count = new Number();
var count = 10;
function start(){ //responsavel em contar o count
    if ((count -1) >= 0) {
    }
}*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
	<meta charset="utf-8"> <!-- caracter diferente-->
	<link rel="stylesheet" type="text/css" href="css/estilo_jogo.css">

	<title>Adivinha a palavra</title>

</head>
<body>
	<input type="button" onclick='teste(this.value)'>

	<table border= "0">
		<tr>
			<td colspan="15">Dica:</td>
		</tr>

		<tr class="area">
			<td> <div id="num1"></div> </td> <!--UM ID EM TODAS AS DIV'S-->
			<td> <div id="num2"></div> </td>
			<td> <div id="num3"></div> </td>
			<td> <div id="num4"></div> </td>
			<td> <div id="num5"></div> </td>
			<td> <div id="num6"></div> </td>
			<td> <div id="num7"></div> </td>
			<td> <div id="num8"></div> </td>
			<td> <div id="num9"></div> </td>
			<td> <div id="num10"></div> </td>
			<td> <div id="num11"></div> </td>
			<td> <div id="num12"></div> </td>
			<td> <div id="num13"></div> </td>
			<td> <div id="num14"></div> </td>
			<td> <div id="num15"></div> </td>
			<td class="tempo">Tempo</td>     <!-- AQUI SERÁ O CRONOMETRO-->
		</tr>

		<tr class="area">
			<td> <div id="num16"></div> </td>
			<td> <div id="num17"></div> </td>
			<td> <div id="num18"></div> </td>
			<td> <div id="num19"></div> </td>
			<td> <div id="num20"></div> </td>
			<td> <div id="num21"></div> </td>
			<td> <div id="num22"></div> </td>
			<td> <div id="num23"></div> </td>
			<td> <div id="num24"></div> </td>
			<td> <div id="num25"></div> </td>
			<td> <div id="num26"></div> </td>
			<td> <div id="num27"></div> </td>
			<td> <div id="num28"></div> </td>
			<td> <div id="num29"></div> </td>
			<td> <div id="num30"></div> </td>
		</tr>

		<tr class="area">
			<td> <div id="num31"></div> </td>
			<td> <div id="num32"></div> </td>
			<td> <div id="num33"></div> </td>
			<td> <div id="num34"></div> </td>
			<td> <div id="num35"></div> </td>
			<td> <div id="num36"></div> </td>
			<td> <div id="num37"></div> </td>
			<td> <div id="num38"></div> </td>
			<td> <div id="num39"></div> </td>
			<td> <div id="num40"></div> </td>
			<td> <div id="num41"></div> </td>
			<td> <div id="num42"></div> </td>
			<td> <div id="num43"></div> </td>
			<td> <div id="num44"></div> </td>
			<td> <div id="num45"></div> </td>
  			<td class="iniciar"> <button >Iniciar</button></td> <!-- MELHORAR ESSE BOTÃO E O DE SAIR-->
		</tr>

		<tr class="area">
			<td> <div id="num46"></div> </td>
			<td> <div id="num47"></div> </td>
			<td> <div id="num48"></div> </td>
			<td> <div id="num49"></div> </td>
			<td> <div id="num50"></div> </td>
			<td> <div id="num51"></div> </td>
			<td> <div id="num52"></div> </td>
			<td> <div id="num53"></div> </td>
			<td> <div id="num54"></div> </td>
			<td> <div id="num55"></div> </td>
			<td> <div id="num56"></div> </td>
			<td> <div id="num57"></div> </td>
			<td> <div id="num58"></div> </td>
			<td> <div id="num59"></div> </td>
			<td> <div id="num60"></div> </td>
		</tr>

		<tr class="area">
			<td> <div id="num61"></div> </td>
			<td> <div id="num62"></div> </td>
			<td> <div id="num63"></div> </td>
			<td> <div id="num64"></div> </td>
			<td> <div id="num65"></div> </td>
			<td> <div id="num66"></div> </td>
			<td> <div id="num67"></div> </td>
			<td> <div id="num68"></div> </td>
			<td> <div id="num69"></div> </td>
			<td> <div id="num70"></div> </td>
			<td> <div id="num71"></div> </td>
			<td> <div id="num72"></div> </td>
			<td> <div id="num73"></div> </td>
			<td> <div id="num74"></div> </td>
			<td> <div id="num75"></div> </td>
			<td class="sair"><button>Sair</button></td>
		</tr>

		<tr class="area">
			<td> <div id="num76"></div> </td>
			<td> <div id="num77"></div> </td>
			<td> <div id="num78"></div> </td>
			<td> <div id="num79"></div> </td>
			<td> <div id="num80"></div> </td>
			<td> <div id="num81"></div> </td>
			<td> <div id="num82"></div> </td>
			<td> <div id="num83"></div> </td>
			<td> <div id="num84"></div> </td>
			<td> <div id="num85"></div> </td>
			<td> <div id="num86"></div> </td>
			<td> <div id="num87"></div> </td>
			<td> <div id="num88"></div> </td>
			<td> <div id="num89"></div> </td>
			<td> <div id="num90"></div> </td>
		</tr>

		<tr class="area">
			<td> <div id="num91"></div> </td>
			<td> <div id="num92"></div> </td>
			<td> <div id="num93"></div> </td>
			<td> <div id="num94"></div> </td>
			<td> <div id="num95"></div> </td>
			<td> <div id="num96"></div> </td>
			<td> <div id="num97"></div> </td>
			<td> <div id="num98"></div> </td>
			<td> <div id="num99"></div> </td>
			<td> <div id="num100"></div> </td>
			<td> <div id="num101"></div> </td>
			<td> <div id="num102"></div> </td>
			<td> <div id="num103"></div> </td>
			<td> <div id="num104"></div> </td>
			<td> <div id="num105"></div> </td>
			<td rowspan="4" class="informacoes">Informações: 
			As Letras da palavras, estão embaralhada;
			Tem 40 segundos para escrever corretamente;
			O tempo acabou e não conseguiu escrever, perdeu;
			terminou antes do tempo, mas a palavra está errada, perdeu;</td>
		</tr>

		<tr class="area_perigo">              <!--NÃO ESTOU CONSEGUINDO TROCAR A COR-->
			<td> <div id="num106"></div> </td>
			<td> <div id="num107"></div> </td>
			<td> <div id="num108"></div> </td>
			<td> <div id="num109"></div> </td>
			<td> <div id="num110"></div> </td>
			<td> <div id="num111"></div> </td>
			<td> <div id="num112"></div> </td>
			<td> <div id="num113"></div> </td>
			<td> <div id="num114"></div> </td>
			<td> <div id="num115"></div> </td>
			<td> <div id="num116"></div> </td>
			<td> <div id="num117"></div> </td>
			<td> <div id="num118"></div> </td>
			<td> <div id="num119"></div> </td>
			<td> <div id="num120"></div> </td>
		</tr>

		<tr class="area_perigo">
			<td> <div id="num121"></div> </td>
			<td> <div id="num122"></div> </td>
			<td> <div id="num123"></div> </td>
			<td> <div id="num124"></div> </td>
			<td> <div id="num125"></div> </td>
			<td> <div id="num126"></div> </td>
			<td> <div id="num127"></div> </td>
			<td> <div id="num128"></div> </td>
			<td> <div id="num129"></div> </td>
			<td> <div id="num130"></div> </td>
			<td> <div id="num131"></div> </td>
			<td> <div id="num132"></div> </td>
			<td> <div id="num133"></div> </td>
			<td> <div id="num134"></div> </td>
			<td> <div id="num135"></div> </td>
		</tr>

		<tr class="area_perigo">
			<td> <div id="num136"></div> </td>
			<td> <div id="num137"></div> </td>
			<td> <div id="num138"></div> </td>
			<td> <div id="num139"></div> </td>
			<td> <div id="num140"></div> </td>
			<td> <div id="num141"></div> </td>
			<td> <div id="num142"></div> </td>
			<td> <div id="num143"></div> </td>
			<td> <div id="num144"></div> </td>
			<td> <div id="num145"></div> </td>
			<td> <div id="num146"></div> </td>
			<td> <div id="num147"></div> </td>
			<td> <div id="num148"></div> </td>
			<td> <div id="num149"></div> </td>
			<td> <div id="num150"></div> </td>
		</tr>

		<tr>
			<td colspan="10">Respostas: </td>
		</tr>
	</table>

</body>
</html>

javascript html table

1 answer

0

You can make the Divs within each TD of the table clickable using the selector $('div[id^=num]', 'table'). It will fetch inside table all Ivs that have a id beginning with num:

//CLICAR NA TABELA
//primeiro fazer uma função que tenha uma varia como parametro para receber o id da div 
//chamar no onclick cada div
$(document).ready(function(){
    $('div[id^=num]', 'table').click(function(){
        var id = $(this).attr("id");
        alert(id);
    });
});

//CONTAGEM REGRESSIVA
/*var count = new Number();
var count = 10;
function start(){ //responsavel em contar o count
    if ((count -1) >= 0) {
    }
}*/
/* apenas para mostrar as divs */
div{
   background: red;
   width: 20px;
   height: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
	<meta charset="utf-8"> <!-- caracter diferente-->
	<link rel="stylesheet" type="text/css" href="css/estilo_jogo.css">

	<title>Adivinha a palavra</title>

</head>
<body>
	<input type="button" onclick='teste(this.value)'>

	<table border= "0">
		<tr>
			<td colspan="15">Dica:</td>
		</tr>

		<tr class="area">
			<td> <div id="num1"></div> </td> <!--UM ID EM TODAS AS DIV'S-->
			<td> <div id="num2"></div> </td>
			<td> <div id="num3"></div> </td>
			<td> <div id="num4"></div> </td>
			<td> <div id="num5"></div> </td>
			<td> <div id="num6"></div> </td>
			<td> <div id="num7"></div> </td>
			<td> <div id="num8"></div> </td>
			<td> <div id="num9"></div> </td>
			<td> <div id="num10"></div> </td>
			<td> <div id="num11"></div> </td>
			<td> <div id="num12"></div> </td>
			<td> <div id="num13"></div> </td>
			<td> <div id="num14"></div> </td>
			<td> <div id="num15"></div> </td>
			<td class="tempo">Tempo</td>     <!-- AQUI SERÁ O CRONOMETRO-->
		</tr>

		<tr class="area">
			<td> <div id="num16"></div> </td>
			<td> <div id="num17"></div> </td>
			<td> <div id="num18"></div> </td>
			<td> <div id="num19"></div> </td>
			<td> <div id="num20"></div> </td>
			<td> <div id="num21"></div> </td>
			<td> <div id="num22"></div> </td>
			<td> <div id="num23"></div> </td>
			<td> <div id="num24"></div> </td>
			<td> <div id="num25"></div> </td>
			<td> <div id="num26"></div> </td>
			<td> <div id="num27"></div> </td>
			<td> <div id="num28"></div> </td>
			<td> <div id="num29"></div> </td>
			<td> <div id="num30"></div> </td>
		</tr>

		<tr class="area">
			<td> <div id="num31"></div> </td>
			<td> <div id="num32"></div> </td>
			<td> <div id="num33"></div> </td>
			<td> <div id="num34"></div> </td>
			<td> <div id="num35"></div> </td>
			<td> <div id="num36"></div> </td>
			<td> <div id="num37"></div> </td>
			<td> <div id="num38"></div> </td>
			<td> <div id="num39"></div> </td>
			<td> <div id="num40"></div> </td>
			<td> <div id="num41"></div> </td>
			<td> <div id="num42"></div> </td>
			<td> <div id="num43"></div> </td>
			<td> <div id="num44"></div> </td>
			<td> <div id="num45"></div> </td>
  			<td class="iniciar"> <button >Iniciar</button></td> <!-- MELHORAR ESSE BOTÃO E O DE SAIR-->
		</tr>

		<tr class="area">
			<td> <div id="num46"></div> </td>
			<td> <div id="num47"></div> </td>
			<td> <div id="num48"></div> </td>
			<td> <div id="num49"></div> </td>
			<td> <div id="num50"></div> </td>
			<td> <div id="num51"></div> </td>
			<td> <div id="num52"></div> </td>
			<td> <div id="num53"></div> </td>
			<td> <div id="num54"></div> </td>
			<td> <div id="num55"></div> </td>
			<td> <div id="num56"></div> </td>
			<td> <div id="num57"></div> </td>
			<td> <div id="num58"></div> </td>
			<td> <div id="num59"></div> </td>
			<td> <div id="num60"></div> </td>
		</tr>

		<tr class="area">
			<td> <div id="num61"></div> </td>
			<td> <div id="num62"></div> </td>
			<td> <div id="num63"></div> </td>
			<td> <div id="num64"></div> </td>
			<td> <div id="num65"></div> </td>
			<td> <div id="num66"></div> </td>
			<td> <div id="num67"></div> </td>
			<td> <div id="num68"></div> </td>
			<td> <div id="num69"></div> </td>
			<td> <div id="num70"></div> </td>
			<td> <div id="num71"></div> </td>
			<td> <div id="num72"></div> </td>
			<td> <div id="num73"></div> </td>
			<td> <div id="num74"></div> </td>
			<td> <div id="num75"></div> </td>
			<td class="sair"><button>Sair</button></td>
		</tr>

		<tr class="area">
			<td> <div id="num76"></div> </td>
			<td> <div id="num77"></div> </td>
			<td> <div id="num78"></div> </td>
			<td> <div id="num79"></div> </td>
			<td> <div id="num80"></div> </td>
			<td> <div id="num81"></div> </td>
			<td> <div id="num82"></div> </td>
			<td> <div id="num83"></div> </td>
			<td> <div id="num84"></div> </td>
			<td> <div id="num85"></div> </td>
			<td> <div id="num86"></div> </td>
			<td> <div id="num87"></div> </td>
			<td> <div id="num88"></div> </td>
			<td> <div id="num89"></div> </td>
			<td> <div id="num90"></div> </td>
		</tr>

		<tr class="area">
			<td> <div id="num91"></div> </td>
			<td> <div id="num92"></div> </td>
			<td> <div id="num93"></div> </td>
			<td> <div id="num94"></div> </td>
			<td> <div id="num95"></div> </td>
			<td> <div id="num96"></div> </td>
			<td> <div id="num97"></div> </td>
			<td> <div id="num98"></div> </td>
			<td> <div id="num99"></div> </td>
			<td> <div id="num100"></div> </td>
			<td> <div id="num101"></div> </td>
			<td> <div id="num102"></div> </td>
			<td> <div id="num103"></div> </td>
			<td> <div id="num104"></div> </td>
			<td> <div id="num105"></div> </td>
			<td rowspan="4" class="informacoes">Informações: 
			As Letras da palavras, estão embaralhada;
			Tem 40 segundos para escrever corretamente;
			O tempo acabou e não conseguiu escrever, perdeu;
			terminou antes do tempo, mas a palavra está errada, perdeu;</td>
		</tr>

		<tr class="area_perigo">              <!--NÃO ESTOU CONSEGUINDO TROCAR A COR-->
			<td> <div id="num106"></div> </td>
			<td> <div id="num107"></div> </td>
			<td> <div id="num108"></div> </td>
			<td> <div id="num109"></div> </td>
			<td> <div id="num110"></div> </td>
			<td> <div id="num111"></div> </td>
			<td> <div id="num112"></div> </td>
			<td> <div id="num113"></div> </td>
			<td> <div id="num114"></div> </td>
			<td> <div id="num115"></div> </td>
			<td> <div id="num116"></div> </td>
			<td> <div id="num117"></div> </td>
			<td> <div id="num118"></div> </td>
			<td> <div id="num119"></div> </td>
			<td> <div id="num120"></div> </td>
		</tr>

		<tr class="area_perigo">
			<td> <div id="num121"></div> </td>
			<td> <div id="num122"></div> </td>
			<td> <div id="num123"></div> </td>
			<td> <div id="num124"></div> </td>
			<td> <div id="num125"></div> </td>
			<td> <div id="num126"></div> </td>
			<td> <div id="num127"></div> </td>
			<td> <div id="num128"></div> </td>
			<td> <div id="num129"></div> </td>
			<td> <div id="num130"></div> </td>
			<td> <div id="num131"></div> </td>
			<td> <div id="num132"></div> </td>
			<td> <div id="num133"></div> </td>
			<td> <div id="num134"></div> </td>
			<td> <div id="num135"></div> </td>
		</tr>

		<tr class="area_perigo">
			<td> <div id="num136"></div> </td>
			<td> <div id="num137"></div> </td>
			<td> <div id="num138"></div> </td>
			<td> <div id="num139"></div> </td>
			<td> <div id="num140"></div> </td>
			<td> <div id="num141"></div> </td>
			<td> <div id="num142"></div> </td>
			<td> <div id="num143"></div> </td>
			<td> <div id="num144"></div> </td>
			<td> <div id="num145"></div> </td>
			<td> <div id="num146"></div> </td>
			<td> <div id="num147"></div> </td>
			<td> <div id="num148"></div> </td>
			<td> <div id="num149"></div> </td>
			<td> <div id="num150"></div> </td>
		</tr>

		<tr>
			<td colspan="10">Respostas: </td>
		</tr>
	</table>

</body>
</html>

  • Thank you! The code worked!

  • Glad it worked out! Be sure to mark the answer with . Obg!

Browser other questions tagged javascript html table

You are not signed in. Login or sign up in order to post.