How do I style a table so that specific boxes in the table change colors onclick?

Question

How do I make the elements in this table change color from the background color to red and back to the default color when I click them?

<table align="center" style="height: 355px;" width="664" border="3px">
  <tbody>
    <tr>
      <td style="width: 94px;">25</td>
      <td style="width: 94px;">26</td>
      <td style="width: 95px;">27</td>
      <td style="width: 95px;">28</td>
      <td style="width: 95px;">29</td>
      <td style="width: 95px;">30</td>
      <td style="width: 95px;">&nbsp;</td>
    </tr>
  </tbody>
</table>

score 0 · Answer 1 · answered May 18 '17 at 13:26

Add an onclick listener to the elements you want (I'm presuming that you are generating the cells dynamically)

<table align="center" style="height: 355px;" width="664" border="3px">
      <tbody>
        <tr>
          <td style="width: 94px;" onclick="changeColor(this)">25</td>
          <td style="width: 94px;">26</td>
          <td style="width: 95px;">27</td>
          <td style="width: 95px;">28</td>
          <td style="width: 95px;">29</td>
          <td style="width: 95px;">30</td>
          <td style="width: 95px;">&nbsp;</td>
        </tr>
      </tbody>
    </table>

and in jquery you would do something like this (alternatively use javascript):

function changeColor(elt){
  $elt = $(elt);
  $elt.toggleClass("redBg");
}

In css:

.redBg{
  background-color:red;
}

[onclick vs event-handler](http://stackoverflow.com/questions/6941483/onclick-vs-event-handler) — Mi-Creativity, May 18 '17 at 13:36

score 0 · Answer 2 · answered May 18 '17 at 13:26

you can play with the classes, by appending and removing them as you want. Also you can change more style by this.

$(document).ready(function() {
  $('.table tbody tr td').on('click', changeColor);
});

function changeColor() {
 if(!this.classList.contains('first')){
  this.classList.add('first');
  this.classList.remove('second');
 } else {
 this.classList.remove('first');
 this.classList.add('second');
 }
}

.first{
  background : red;
}
.second{
  background : blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table align="center" class="table" style="height: 355px;" width="664" border="3px">
  <tbody>
    <tr>
      <td style="width: 94px;">25</td>
      <td style="width: 94px;">26</td>
      <td style="width: 95px;">27</td>
      <td style="width: 95px;">28</td>
      <td style="width: 95px;">29</td>
      <td style="width: 95px;">30</td>
      <td style="width: 95px;">&nbsp;</td>
    </tr>
  </tbody>
</table>

this will work on all boxes, OP asked for specific boxes, plus you could just use the toggleClass property instead of going into conditions — Elie Nassif, May 18 '17 at 13:29
that's true, i just tried to keep the code as simple as i can. so he can understand the code. — sumit chauhan, May 18 '17 at 13:30

score 0 · Answer 3 · answered May 18 '17 at 13:42

Simply use with classList.toggle('class')

document.querySelectorAll('tr td').forEach(function(a){
a.addEventListener('click',function(){
this.classList.toggle('color')
})
})

.color{
background-color:red;
}

<table align="center" style="height: 355px;" width="664" border="3px">
  <tbody>
    <tr>
      <td style="width: 94px;">25</td>
      <td style="width: 94px;">26</td>
      <td style="width: 95px;">27</td>
      <td style="width: 95px;">28</td>
      <td style="width: 95px;">29</td>
      <td style="width: 95px;">30</td>
      <td style="width: 95px;">&nbsp;</td>
    </tr>
  </tbody>
</table>

alessandrio · Answer 4 · 2017-05-18T13:35:17.917

You should put something like data-color=true and then just assign them the color change

var td = document.getElementsByTagName("td"),
    len = td.length,
    i;
function changeColor(){
  var color = this.style.background!="red";
  this.style.background = (color?"red":"initial");
}
for(i=0;i<len;i+=1){
  if(td[i].getAttribute("data-color")=="true"){
    td[i].onclick = changeColor;
  }
}

<table align="center" style="height: 355px;" width="664" border="3px">
  <tbody>
    <tr>
      <td style="width: 94px;" data-color="true">25</td>
      <td style="width: 94px;" data-color="true">26</td>
      <td style="width: 95px;">27</td>
      <td style="width: 95px;" data-color="true">28</td>
      <td style="width: 95px;">29</td>
      <td style="width: 95px;" data-color="true">30</td>
      <td style="width: 95px;">&nbsp;</td>
    </tr>
  </tbody>
</table>

this will work on all boxes, OP asked for specific boxes. – Elie Nassif May 18 '17 at 13:28 — Elie Nassif, May 18 '17 at 13:28

How do I style a table so that specific boxes in the table change colors onclick?

4 Answers4