Navigation

    ask avan logo
    • Register
    • Login
    • Search
    • Categories
    • menu.unsolved
    • menu.solved
    S

    0
    Online

    180
    Users

    136
    Topics

    389
    Posts

    how to set another <td> bg color on click

    HTML CSS
    html css table border background
    2
    6
    117
    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
        • 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

                Reddit Feed

                How to learn Python?
                Thu, 23 Sep 2021 17:17
                surprise surprise - looking for a front end Bootcamp!
                Thu, 23 Sep 2021 17:36
                MIT xPRO
                Thu, 23 Sep 2021 12:48
                For software developers of the UK (or any job that requires coding/programming), how do I get into the field?
                Thu, 23 Sep 2021 07:54
                Learning to code.
                Thu, 23 Sep 2021 08:37
                R vs Matlab
                Thu, 23 Sep 2021 12:18
                Python vs Julia:
                Thu, 23 Sep 2021 09:12
                Python Vs SQL
                Thu, 23 Sep 2021 03:32
                What language should I learn first?
                Wed, 22 Sep 2021 14:36
                Java vs C#
                Wed, 22 Sep 2021 14:26
                Can't afford bootcamp. Here's my plan.
                Wed, 22 Sep 2021 05:47
                Building A SoundCloud Clone
                Wed, 22 Sep 2021 00:20
                Python VS Scala
                Wed, 22 Sep 2021 03:36
                Full Stack Web Development Bootcamp suggestions
                Tue, 21 Sep 2021 17:59
                What questions should you ask a bootcamp advisor prior to joining?
                Tue, 21 Sep 2021 12:43
                REVIEWS ON CODING DOJO, APP ACADEMY, AND THE TECH ACADEMY? ALSO LOOKING FOR ADVICE ON THE BEST BOOTCAMPS OUT THERE!!
                Tue, 21 Sep 2021 04:54
                Hospital Management system (Android App)
                Tue, 21 Sep 2021 07:51
                Hospital Management system (Android App)
                Tue, 21 Sep 2021 07:52
                Are coding/data analytics boot camps worth it?
                Mon, 20 Sep 2021 20:15
                Data Visualization in Python
                Tue, 21 Sep 2021 03:27
                Best Bootcamp
                Mon, 20 Sep 2021 15:26
                Coding bootcamp or post-bacc in computer science?
                Sat, 18 Sep 2021 16:54
                People who are web developers, is it necessary to have a degree?
                Sat, 18 Sep 2021 17:55
                Problem with input data
                Sat, 18 Sep 2021 21:52
                In person boot camps around Chesapeake, VA?
                Sat, 18 Sep 2021 21:28