Как я могу навсегда изменить другой цвет <td> bg по щелчку мыши
hello there my good people .. i am new in programming and i need some help please .. so i am trying to make a table of 90 numbers that i can check only six digits of them, you know, like the lottery table, and i have really did something very nice depending on my small knowledge in programming, so, the table has 90 numbers from 1 to 90 i need to be able to check only six cells of the table and how is this going to be ? simple, when i click on the cell the bg color will be changed and it's border will be highlighted ! but i will not be allowed to check more than six .. here is my code where i have reached so far
<pre><html>
<head>
</head>
<body>
<style>
td:hover, th:hover { background:#ff0000; color:#fff; }
td:hover, th:hover { cursor:pointer }
td:active { background:#ffffff; }
table {
border-collapse: collapse;
}
table, tr, td {
border: 1px solid black;
}
tr, td {
padding: 7px;
text-align: center;
}
table {
border-spacing: 3px;
border-collapse: separate;
}
</style>
<form>
<table border width=''500'' height=''500'' cellspacing=''0'' cellpadding=''0'' align=center>
<tr>
<td >01</td>
<td >02</td>
<td >03 </td>
<td >04</td>
<td >05 </td>
<td >06</td>
<td >07 </td>
<td >08</td>
<td >09 </td>
<td >10</td>
</tr>
<tr>
<td >11</td>
<td >12</td>
<td >13 </td>
<td >14</td>
<td >15 </td>
<td >16</td>
<td >17 </td>
<td >18</td>
<td >19 </td>
<td >20</td>
</tr>
<tr>
<td >21</td>
<td >22</td>
<td >23 </td>
<td >24</td>
<td >25 </td>
<td >26</td>
<td >27 </td>
<td >28</td>
<td >29 </td>
<td >30</td>
</tr>
<tr>
<td >31</td>
<td >32</td>
<td >33 </td>
<td >34</td>
<td >35 </td>
<td >36</td>
<td >37 </td>
<td >38</td>
<td >39 </td>
<td >40</td>
</tr>
<tr>
<td >41</td>
<td >42</td>
<td >43 </td>
<td >44</td>
<td >45 </td>
<td >46</td>
<td >47 </td>
<td >48</td>
<td >49 </td>
<td >50</td>
</tr>
<tr>
<td >51</td>
<td >52</td>
<td >53 </td>
<td >54</td>
<td >55 </td>
<td >56</td>
<td >57 </td>
<td >58</td>
<td >59 </td>
<td >60</td>
</tr>
<tr>
<td >61</td>
<td >62</td>
<td >63 </td>
<td >64</td>
<td >65 </td>
<td >66</td>
<td >67 </td>
<td >68</td>
<td >69 </td>
<td >70</td>
</tr>
<tr>
<td >71</td>
<td >72</td>
<td >73 </td>
<td >74</td>
<td >75 </td>
<td >76</td>
<td >77 </td>
<td >78</td>
<td >79 </td>
<td >80</td>
</tr>
<tr>
<td >81</td>
<td >82</td>
<td >83 </td>
<td >84</td>
<td >85 </td>
<td >86</td>
<td >87 </td>
<td >88</td>
<td >89 </td>
<td >90</td>
</tr>
</table>
</form>
</body>
</html>
вы можете проверить его и посмотреть, что он может сделать, моя проблема здесь заключается в том, что когда я нажимаю на ячейку, она просто мигает белым цветом, но мне нужно, чтобы она оставалась белой при щелчке и была выделена, но если я нажму на нее снова, она вернется, как и была, как флажок, который вы знаете, но я не хочу использовать флажок, проверьте эту ссылку, пожалуйста Кликните сюда чтобы точно увидеть что я пытаюсь сделать нажмите здесь чтобы увидеть ссылку для примера
если вы можете помочь мне с этим, я буду очень рад, вы дадите мне большой старт, действительно, спасибо !
Что я уже пробовал:
я пытался понять это сам, я искал google и многие сайты, но я не мог решить эту проблему