how to set another <td> bg color on click
-
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> <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 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 !
-
You can achieve what you are trying to do with a little bit of vanilla javascript.
The javascript goes through all the cells and adds a click event listener. The event listener checks if the cell is a red cell or white cell and makes sure we don't have more than 6 red cells at any one time.
In addition to the Javascript I have also added a new style set:
.highlightRed { background:#ff0000; color:#fff; }
And a class name to all <td> cells
<td class="cell">...</td>
Then comes the javascript added right before the closing of the <body> tag
<script> // Keeps track of all red cells let count = 0; // Get all cells let cells = document.querySelectorAll(".cell"); // Attach click event listener to all cells for(let i = 0; i < cells.length; i++){ let cell = cells[i]; cell.onclick = function() { // If cell has not been highlighted yet if(!cell.classList.contains('highlightRed')){ // If less than 6 cells have been highlighted as red, highlight // this cell red if(count < 6){ cell.classList.toggle("highlightRed"); count++; } // Cell is highlighted as RED. // Mark cell is whie and decrement count. }else { cell.classList.toggle("highlightRed"); count--; } }; } </script>
So here is the whole html file at once:
<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; } .highlightRed { background:#ff0000; color:#fff; } </style> <form> <table border width='500' height='500' cellspacing='0' cellpadding='0' align=center> <tr> <td class="cell">01</td> <td class="cell">02</td> <td class="cell">03 </td> <td class="cell">04</td> <td class="cell">05 </td> <td class="cell">06</td> <td class="cell">07 </td> <td class="cell">08</td> <td class="cell">09 </td> <td class="cell">10</td> </tr> <tr> <td class="cell">11</td> <td class="cell">12</td> <td class="cell">13 </td> <td class="cell">14</td> <td class="cell">15 </td> <td class="cell">16</td> <td class="cell">17 </td> <td class="cell">18</td> <td class="cell">19 </td> <td class="cell">20</td> </tr> <tr> <td class="cell">21</td> <td class="cell">22</td> <td class="cell">23 </td> <td class="cell">24</td> <td class="cell">25 </td> <td class="cell">26</td> <td class="cell">27 </td> <td class="cell">28</td> <td class="cell">29 </td> <td class="cell">30</td> </tr> <tr> <td class="cell">31</td> <td class="cell">32</td> <td class="cell">33 </td> <td class="cell">34</td> <td class="cell">35 </td> <td class="cell">36</td> <td class="cell">37 </td> <td class="cell">38</td> <td class="cell">39 </td> <td class="cell">40</td> </tr> <tr> <td class="cell">41</td> <td class="cell">42</td> <td class="cell">43 </td> <td class="cell">44</td> <td class="cell">45 </td> <td class="cell">46</td> <td class="cell">47 </td> <td class="cell">48</td> <td class="cell">49 </td> <td class="cell">50</td> </tr> <tr> <td class="cell">51</td> <td class="cell">52</td> <td class="cell">53 </td> <td class="cell">54</td> <td class="cell">55 </td> <td class="cell">56</td> <td class="cell">57 </td> <td class="cell">58</td> <td class="cell">59 </td> <td class="cell">60</td> </tr> <tr> <td class="cell">61</td> <td class="cell">62</td> <td class="cell">63 </td> <td class="cell">64</td> <td class="cell">65 </td> <td class="cell">66</td> <td class="cell">67 </td> <td class="cell">68</td> <td class="cell">69 </td> <td class="cell">70</td> </tr> <tr> <td class="cell">71</td> <td class="cell">72</td> <td class="cell">73 </td> <td class="cell">74</td> <td class="cell">75 </td> <td class="cell">76</td> <td class="cell">77 </td> <td class="cell">78</td> <td class="cell">79 </td> <td class="cell">80</td> </tr> <tr> <td class="cell">81</td> <td class="cell">82</td> <td class="cell">83 </td> <td class="cell">84</td> <td class="cell">85 </td> <td class="cell">86</td> <td class="cell">87 </td> <td class="cell">88</td> <td class="cell">89 </td> <td class="cell">90</td> </tr> </table> </form> <script> // Keeps track of all red cells let count = 0; // Get all cells let cells = document.querySelectorAll(".cell"); // Attach click event listener to all cells for(let i = 0; i < cells.length; i++){ let cell = cells[i]; cell.onclick = function() { // If cell has not been highlighted yet if(!cell.classList.contains('highlightRed')){ // If less than 6 cells have been highlighted as red, highlight // this cell red if(count < 6){ cell.classList.toggle("highlightRed"); count++; } // Cell is highlighted as RED. // Mark cell is whie and decrement count. }else { cell.classList.toggle("highlightRed"); count--; } }; } </script> </body> </html>
-
You can achieve what you are trying to do with a little bit of vanilla javascript.
The javascript goes through all the cells and adds a click event listener. The event listener checks if the cell is a red cell or white cell and makes sure we don't have more than 6 red cells at any one time.
In addition to the Javascript I have also added a new style set:
.highlightRed { background:#ff0000; color:#fff; }
And a class name to all <td> cells
<td class="cell">...</td>
Then comes the javascript added right before the closing of the <body> tag
<script> // Keeps track of all red cells let count = 0; // Get all cells let cells = document.querySelectorAll(".cell"); // Attach click event listener to all cells for(let i = 0; i < cells.length; i++){ let cell = cells[i]; cell.onclick = function() { // If cell has not been highlighted yet if(!cell.classList.contains('highlightRed')){ // If less than 6 cells have been highlighted as red, highlight // this cell red if(count < 6){ cell.classList.toggle("highlightRed"); count++; } // Cell is highlighted as RED. // Mark cell is whie and decrement count. }else { cell.classList.toggle("highlightRed"); count--; } }; } </script>
So here is the whole html file at once:
<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; } .highlightRed { background:#ff0000; color:#fff; } </style> <form> <table border width='500' height='500' cellspacing='0' cellpadding='0' align=center> <tr> <td class="cell">01</td> <td class="cell">02</td> <td class="cell">03 </td> <td class="cell">04</td> <td class="cell">05 </td> <td class="cell">06</td> <td class="cell">07 </td> <td class="cell">08</td> <td class="cell">09 </td> <td class="cell">10</td> </tr> <tr> <td class="cell">11</td> <td class="cell">12</td> <td class="cell">13 </td> <td class="cell">14</td> <td class="cell">15 </td> <td class="cell">16</td> <td class="cell">17 </td> <td class="cell">18</td> <td class="cell">19 </td> <td class="cell">20</td> </tr> <tr> <td class="cell">21</td> <td class="cell">22</td> <td class="cell">23 </td> <td class="cell">24</td> <td class="cell">25 </td> <td class="cell">26</td> <td class="cell">27 </td> <td class="cell">28</td> <td class="cell">29 </td> <td class="cell">30</td> </tr> <tr> <td class="cell">31</td> <td class="cell">32</td> <td class="cell">33 </td> <td class="cell">34</td> <td class="cell">35 </td> <td class="cell">36</td> <td class="cell">37 </td> <td class="cell">38</td> <td class="cell">39 </td> <td class="cell">40</td> </tr> <tr> <td class="cell">41</td> <td class="cell">42</td> <td class="cell">43 </td> <td class="cell">44</td> <td class="cell">45 </td> <td class="cell">46</td> <td class="cell">47 </td> <td class="cell">48</td> <td class="cell">49 </td> <td class="cell">50</td> </tr> <tr> <td class="cell">51</td> <td class="cell">52</td> <td class="cell">53 </td> <td class="cell">54</td> <td class="cell">55 </td> <td class="cell">56</td> <td class="cell">57 </td> <td class="cell">58</td> <td class="cell">59 </td> <td class="cell">60</td> </tr> <tr> <td class="cell">61</td> <td class="cell">62</td> <td class="cell">63 </td> <td class="cell">64</td> <td class="cell">65 </td> <td class="cell">66</td> <td class="cell">67 </td> <td class="cell">68</td> <td class="cell">69 </td> <td class="cell">70</td> </tr> <tr> <td class="cell">71</td> <td class="cell">72</td> <td class="cell">73 </td> <td class="cell">74</td> <td class="cell">75 </td> <td class="cell">76</td> <td class="cell">77 </td> <td class="cell">78</td> <td class="cell">79 </td> <td class="cell">80</td> </tr> <tr> <td class="cell">81</td> <td class="cell">82</td> <td class="cell">83 </td> <td class="cell">84</td> <td class="cell">85 </td> <td class="cell">86</td> <td class="cell">87 </td> <td class="cell">88</td> <td class="cell">89 </td> <td class="cell">90</td> </tr> </table> </form> <script> // Keeps track of all red cells let count = 0; // Get all cells let cells = document.querySelectorAll(".cell"); // Attach click event listener to all cells for(let i = 0; i < cells.length; i++){ let cell = cells[i]; cell.onclick = function() { // If cell has not been highlighted yet if(!cell.classList.contains('highlightRed')){ // If less than 6 cells have been highlighted as red, highlight // this cell red if(count < 6){ cell.classList.toggle("highlightRed"); count++; } // Cell is highlighted as RED. // Mark cell is whie and decrement count. }else { cell.classList.toggle("highlightRed"); count--; } }; } </script> </body> </html>
-
@avan said in how to set another <td> bg color on click:
<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;
}.highlightRed {
background:#ff0000;
color:#fff;
}</style>
<form>
<table border width='500' height='500' cellspacing='0' cellpadding='0' align=center><tr>
<td class="cell">01</td>
<td class="cell">02</td>
<td class="cell">03 </td>
<td class="cell">04</td>
<td class="cell">05 </td>
<td class="cell">06</td>
<td class="cell">07 </td>
<td class="cell">08</td>
<td class="cell">09 </td>
<td class="cell">10</td>
</tr><tr>
<td class="cell">11</td>
<td class="cell">12</td>
<td class="cell">13 </td>
<td class="cell">14</td>
<td class="cell">15 </td>
<td class="cell">16</td>
<td class="cell">17 </td>
<td class="cell">18</td>
<td class="cell">19 </td>
<td class="cell">20</td>
</tr><tr>
<td class="cell">21</td>
<td class="cell">22</td>
<td class="cell">23 </td>
<td class="cell">24</td>
<td class="cell">25 </td>
<td class="cell">26</td>
<td class="cell">27 </td>
<td class="cell">28</td>
<td class="cell">29 </td>
<td class="cell">30</td>
</tr><tr>
<td class="cell">31</td>
<td class="cell">32</td>
<td class="cell">33 </td>
<td class="cell">34</td>
<td class="cell">35 </td>
<td class="cell">36</td>
<td class="cell">37 </td>
<td class="cell">38</td>
<td class="cell">39 </td>
<td class="cell">40</td>
</tr><tr>
<td class="cell">41</td>
<td class="cell">42</td>
<td class="cell">43 </td>
<td class="cell">44</td>
<td class="cell">45 </td>
<td class="cell">46</td>
<td class="cell">47 </td>
<td class="cell">48</td>
<td class="cell">49 </td>
<td class="cell">50</td>
</tr><tr>
<td class="cell">51</td>
<td class="cell">52</td>
<td class="cell">53 </td>
<td class="cell">54</td>
<td class="cell">55 </td>
<td class="cell">56</td>
<td class="cell">57 </td>
<td class="cell">58</td>
<td class="cell">59 </td>
<td class="cell">60</td>
</tr><tr>
<td class="cell">61</td>
<td class="cell">62</td>
<td class="cell">63 </td>
<td class="cell">64</td>
<td class="cell">65 </td>
<td class="cell">66</td>
<td class="cell">67 </td>
<td class="cell">68</td>
<td class="cell">69 </td>
<td class="cell">70</td>
</tr><tr>
<td class="cell">71</td>
<td class="cell">72</td>
<td class="cell">73 </td>
<td class="cell">74</td>
<td class="cell">75 </td>
<td class="cell">76</td>
<td class="cell">77 </td>
<td class="cell">78</td>
<td class="cell">79 </td>
<td class="cell">80</td>
</tr><tr>
<td class="cell">81</td>
<td class="cell">82</td>
<td class="cell">83 </td>
<td class="cell">84</td>
<td class="cell">85 </td>
<td class="cell">86</td>
<td class="cell">87 </td>
<td class="cell">88</td>
<td class="cell">89 </td>
<td class="cell">90</td>
</tr>
</table>
</form>
<script>
// Keeps track of all red cells
let count = 0;
// Get all cells
let cells = document.querySelectorAll(".cell");
// Attach click event listener to all cells
for(let i = 0; i < cells.length; i++){
let cell = cells[i];
cell.onclick = function() {
// If cell has not been highlighted yet
if(!cell.classList.contains('highlightRed')){
// If less than 6 cells have been highlighted as red, highlight
// this cell red
if(count < 6){
cell.classList.toggle("highlightRed");
count++;
}
// Cell is highlighted as RED.
// Mark cell is whie and decrement count.
}else {
cell.classList.toggle("highlightRed");
count--;
}
};
}
</script>
</body></html>
Hey mister Avan, i really don't know how to thank you, but i would really say thank you a lot, really, thank you so much, i did understood what you said, didn't just copy and paste, i will try to share this incredible website as much as i can, thank again
-
@Michael-Constantine glad I could help and sharing is the best way to thank me!
Feel free to post anytime.
@Michael-Constantine Almost forgot, do you mind selecting my response as the correct answer? Thanks.
-
yes sure but i can't find where should i submit solved or something !
-
@Michael-Constantine You are good. I took care of it.