1. Home
  2. Categories
  3. Coding Question & Answers
  4. HTML CSS
  5. how to set another <td> bg color on click

how to set another <td> bg color on click

  • Michael Constantine

    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 !

    1
  • avan

    Hey @Michael-Constantine

    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>
    1
  • avan

    Hey @Michael-Constantine

    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>
    1
  • Michael Constantine

    @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

    0
  • avan

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

    1
  • Michael Constantine

    yes sure but i can't find where should i submit solved or something !

    0
  • avan

    @Michael-Constantine You are good. I took care of it.

    1
css 3 html 3 table 2 background 1 border 1
Log in to reply