How do I change permanently another <td> bg color on click

Question

0.00/5 (No votes)

See more:

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

HTML

<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>

you can check it and see what it can do, my problem here is when i click on a cell it just like blinks with white color but i need it to stay White on click, and to be highlighted, but if i click on it again it will go back as it was, like a checkbox you know, but i don't want to use checkbox, check this link please Click here to see exactly what i am trying to do click here to see the link for the example
if you can help me with this, i'll be glad really, you will give me a big start really, thank you !

What I have tried:

i have tried to figure it out myself, i have searched google and many sites but i couldn't solve it

Posted 20-Feb-20 21:39pm

MichaelConsta

Updated 20-Feb-20 22:35pm

v2

Add a Solution

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

TheRealSteveJudge · Answer 1 · 2020-02-20T22:22:00

You can achieve this by adding some javascript between the head tags.

<head>
<script>
  var counter = 0;
  document.addEventListener('click', function mark (e) {    
      if(counter === 6){
        alert("Maximum reached.");
        return;
      }
      e.target.style.outline = "solid blue 1px";
      counter++;
  });
</script>
</head>

There is still a slight problem.
It will show the AlertBox even if you click on the same number 6 times.

MichaelConsta · Answer 2 · 2020-02-20T22:36:00

yes you are right, i have tried the code you have provided and i thank you sir, i have added the highlight table cell "onclick" and i have added the code for maximum reach you have provided as well, this is the code now, how it look like, it just need to be improved a bit more, i hope it gonna work soon 

```
<html>
<head>

<script>
window.onload = function(){

    var all = document.getElementsByTagName("td");
    for (var i=0;i<all.length;i++) {
        all[i].onclick = inputClickHandler;       
    }
};

function inputClickHandler(e){
    e = e||window.event;
    var tdElm = e.target||e.srcElement;
    if(tdElm.style.backgroundColor == 'rgb(255, 0, 0)'){
        tdElm.style.backgroundColor = '#fff';
    } else {
        tdElm.style.backgroundColor = '#f00';
    }
}
</script>


<script>
  var counter = 0;
  document.addEventListener('click', function mark (e) {    
      if(counter === 6){
        alert("Maximum reached.");
        return;
      }
      e.target.style.outline = "solid blue 1px";
      counter++;
  });
</script>

</head>

<body>

<style>

td:hover, th:hover { background:#ff0000; color:#fff; }
td:hover, th:hover { cursor:pointer }

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>
```

How do I change permanently another <td> bg color on click

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0