Navigation

    ask avan logo
    • Register
    • Login
    • Search
    • Categories
    • Unsolved
    • Solved

    how to set another <td> bg color on click

    HTML CSS
    background border css html table
    2
    6
    20
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • Michael Constantine
      Michael Constantine last edited by

      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 !

      Reply Quote 1
        1 Reply Last reply

      • avan
        avan last edited by

        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>
        
        Reply Quote 1
          1 Reply Last reply

        • avan
          avan last edited by

          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>
          
          Reply Quote 1
            1 Reply Last reply

          • Michael Constantine
            Michael Constantine last edited by

            @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

            Reply Quote 0
              1 Reply Last reply

            • avan
              avan last edited by 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.

              Reply Quote 1
                1 Reply Last reply

              • Michael Constantine
                Michael Constantine last edited by

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

                Reply Quote 0
                  1 Reply Last reply

                • avan
                  avan last edited by

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

                  Reply Quote 1
                    1 Reply Last reply

                  • First post
                    Last post