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 !



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


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


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