Javascript Change TD bgColor onClick

Question

I have this code that when you click on a table cell it toggles the color to red whilst turning off any cell in the row that is already red so that only one cell in a row is ever red. This happens also in the second row so that only one cell in that row is ever red.
What I want to happen is that only one cell in the entire table is ever red and this will be a 13 row table eventually with only one cell ever red. Any help on this appreciated.

 var el function togCell(col){ if (typeof event!=='undefined') el=event.srcElement for (var i = 0; i < el.parentNode.cells.length; i++) el.parentNode.cells[i].style.backgroundColor='' el.style.backgroundColor=col } if (window.addEventListener) window.addEventListener('click', function(e){el=e.target}, true) 

 table { cursor:text; } td { font-size:14; cursor:default; } 

 <table border="1" cellpadding="8" cellspacing="2"> <tr style="background-color:white;"> <td onclick="togCell('red')">AA</td> <td onclick="togCell('red')">AKs</td> <td onclick="togCell('red')">AQs</td> <td onclick="togCell('red')">AJs</td> <td onclick="togCell('red')">ATs</td> <td onclick="togCell('red')">A9s</td> <td onclick="togCell('red')">A8s</td> <td onclick="togCell('red')">A7s</td> <td onclick="togCell('red')">A6s</td> <td onclick="togCell('red')">A5s</td> <td onclick="togCell('red')">A4s</td> <td onclick="togCell('red')">A3s</td> <td onclick="togCell('red')">A2s</td> </tr> <tr style="background-color:white;"> <td onclick="togCell('red')">AKo</td> <td onclick="togCell('red')">KK</td> <td onclick="togCell('red')">KQs</td> <td onclick="togCell('red')">KJs</td> <td onclick="togCell('red')">KTs</td> <td onclick="togCell('red')">K9s</td> <td onclick="togCell('red')">K8S</td> <td onclick="togCell('red')">K7s</td> <td onclick="togCell('red')">K6s</td> <td onclick="togCell('red')">K5s</td> <td onclick="togCell('red')">K4s</td> <td onclick="togCell('red')">K3s</td> <td onclick="togCell('red')">K2s</td> </tr> </table> 

Answer 1

Here is the most efficient solution which is such because it uses single delegated event on the table level (instead of dozens of events on each table cell). Also this solution uses live HTMLCollection which eliminates need to rechecking what is currently selected.

Also note, that you should avoid using CSS styles directly, consider CSS classes, this is much more flexible approach (say you want to change several CSS props on selected cell, not only background).

Check it out:

 var table = document.querySelector('#table') var selectedCells = table.getElementsByClassName('selected') table.addEventListener('click', function(e) { var td = e.target if (td.tagName !== 'TD') { return } if (selectedCells.length) { selectedCells[0].className = '' } td.className = 'selected' }) 

 table { cursor: text; } tr { background-color:white; } td { font-size: 14; cursor: default; } td.selected { background-color: red; } 

 <table border="1" cellpadding="8" cellspacing="2" id="table"> <tr> <td>AA</td> <td>AKs</td> <td>AQs</td> <td>AJs</td> <td>ATs</td> <td>A9s</td> <td>A8s</td> <td>A7s</td> <td>A6s</td> <td>A5s</td> <td>A4s</td> <td>A3s</td> <td>A2s</td> </tr> <tr> <td>AKo</td> <td>KK</td> <td>KQs</td> <td>KJs</td> <td>KTs</td> <td>K9s</td> <td>K8S</td> <td>K7s</td> <td>K6s</td> <td>K5s</td> <td>K4s</td> <td>K3s</td> <td>K2s</td> </tr> </table> 

Answer 2

Hope this works...Only thing is I have done it with jQuery. If you want it with Plain Javascript let me know will share the snippet for that as well after some time.

 $(function(){ $(".row td.column").on("click",function(){ if($(this).parent().children('td.active').length > 0) { $(this).siblings().removeClass('active'); } $(this).addClass('active') }) }); 

 table tr td{ border: 1px solid red; } .active{ background-color: red; } 

 <table class="container"> <tr class="row"> <td class="column">ABC</td> <td class="column">ABC</td> <td class="column">ABC</td> <td class="column">ABC</td> <td class="column">ABC</td> <td class="column">ABC</td> <td class="column">ABC</td> <td class="column">ABC</td> <td class="column">ABC</td> <td class="column">ABC</td> </tr> <tr class="row"> <td class="column">ABC</td> <td class="column">ABC</td> <td class="column">ABC</td> <td class="column">ABC</td> <td class="column">ABC</td> <td class="column">ABC</td> <td class="column">ABC</td> <td class="column">ABC</td> <td class="column">ABC</td> <td class="column">ABC</td> </tr> <tr class="row"> <td class="column">ABC</td> <td class="column">ABC</td> <td class="column">ABC</td> <td class="column">ABC</td> <td class="column">ABC</td> <td class="column">ABC</td> <td class="column">ABC</td> <td class="column">ABC</td> <td class="column">ABC</td> <td class="column">ABC</td> </tr> <tr class="row"> <td class="column">ABC</td> <td class="column">ABC</td> <td class="column">ABC</td> <td class="column">ABC</td> <td class="column">ABC</td> <td class="column">ABC</td> <td class="column">ABC</td> <td class="column">ABC</td> <td class="column">ABC</td> <td class="column">ABC</td> </tr> <tr class="row"> <td class="column">ABC</td> <td class="column">ABC</td> <td class="column">ABC</td> <td class="column">ABC</td> <td class="column">ABC</td> <td class="column">ABC</td> <td class="column">ABC</td> <td class="column">ABC</td> <td class="column">ABC</td> <td class="column">ABC</td> </tr> <tr class="row"> <td class="column">ABC</td> <td class="column">ABC</td> <td class="column">ABC</td> <td class="column">ABC</td> <td class="column">ABC</td> <td class="column">ABC</td> <td class="column">ABC</td> <td class="column">ABC</td> <td class="column">ABC</td> <td class="column">ABC</td> </tr> <tr class="row"> <td class="column">ABC</td> <td class="column">ABC</td> <td class="column">ABC</td> <td class="column">ABC</td> <td class="column">ABC</td> <td class="column">ABC</td> <td class="column">ABC</td> <td class="column">ABC</td> <td class="column">ABC</td> <td class="column">ABC</td> </tr> <tr class="row"> <td class="column">ABC</td> <td class="column">ABC</td> <td class="column">ABC</td> <td class="column">ABC</td> <td class="column">ABC</td> <td class="column">ABC</td> <td class="column">ABC</td> <td class="column">ABC</td> <td class="column">ABC</td> <td class="column">ABC</td> </tr> <tr class="row"> <td class="column">ABC</td> <td class="column">ABC</td> <td class="column">ABC</td> <td class="column">ABC</td> <td class="column">ABC</td> <td class="column">ABC</td> <td class="column">ABC</td> <td class="column">ABC</td> <td class="column">ABC</td> <td class="column">ABC</td> </tr> <tr class="row"> <td class="column">ABC</td> <td class="column">ABC</td> <td class="column">ABC</td> <td class="column">ABC</td> <td class="column">ABC</td> <td class="column">ABC</td> <td class="column">ABC</td> <td class="column">ABC</td> <td class="column">ABC</td> <td class="column">ABC</td> </tr> <tr class="row"> <td class="column">ABC</td> <td class="column">ABC</td> <td class="column">ABC</td> <td class="column">ABC</td> <td class="column">ABC</td> <td class="column">ABC</td> <td class="column">ABC</td> <td class="column">ABC</td> <td class="column">ABC</td> <td class="column">ABC</td> </tr> <tr class="row"> <td class="column">ABC</td> <td class="column">ABC</td> <td class="column">ABC</td> <td class="column">ABC</td> <td class="column">ABC</td> <td class="column">ABC</td> <td class="column">ABC</td> <td class="column">ABC</td> <td class="column">ABC</td> <td class="column">ABC</td> </tr> <tr class="row"> <td class="column">ABC</td> <td class="column">ABC</td> <td class="column">ABC</td> <td class="column">ABC</td> <td class="column">ABC</td> <td class="column">ABC</td> <td class="column">ABC</td> <td class="column">ABC</td> <td class="column">ABC</td> <td class="column">ABC</td> </tr> </table> 

Answer 3

First i made a little changes in your HTML:

Then I added a new CSS class with the name red:

And finally I made a JQuery function that keeps only one red cell:

 (function togCell(){ $('td').click(function(e){ $('td').removeClass('red'); $(this).addClass('red'); }); })(); 

 table { cursor:text; } td { font-size:14; cursor:default; } .red { background-color: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table border="1" cellpadding="8" cellspacing="2"> <tr style="background-color:white;"> <td id="1">AA</td> <td id="2">AKs</td> <td id="3">AQs</td> <td id="4">AJs</td> <td id="5">ATs</td> <td id="6">A9s</td> <td id="7">A8s</td> <td id="8">A7s</td> <td id="9">A6s</td> <td id="10">A5s</td> <td id="11">A4s</td> <td id="12">A3s</td> <td id="13">A2s</td> </tr> <tr style="background-color:white;"> <td id="14">AKo</td> <td id="15">KK</td> <td id="16">KQs</td> <td id="17">KJs</td> <td id="18">KTs</td> <td id="19">K9s</td> <td id="20">K8S</td> <td id="21">K7s</td> <td id="22">K6s</td> <td id="22">K5s</td> <td id="23">K4s</td> <td id="24">K3s</td> <td id="25">K2s</td> </tr> 

Tested in liveweave.

Answer 4

If you want to use jquery only you have to do is

$('td').on('click', function(){

    $('td').css('background-color', '');
    $(this).css('background-color', 'red');

})

Remove onclick="togCell('red') from html

Or

Within your code

var el
function togCell(col) {
  if (typeof event !== 'undefined')
    el = event.srcElement
  $('td').css('background-color', '') // Using jQuery. Only this line is changed
  el.style.backgroundColor = col
}
if (window.addEventListener)
  window.addEventListener('click', function(e) {
    el = e.target
  }, true)

Or

Using pure JavaScript

var el
function togCell(col) {
  if (typeof event !== 'undefined')
    el = event.srcElement
  elements = document.getElementsByTagName('td');
  for (var i = 0; i < elements.length; i++) {
    elements[i].style.backgroundColor = "";
  }
  el.style.backgroundColor = col
}
if (window.addEventListener)
  window.addEventListener('click', function(e) {
    el = e.target
  }, true)

 $('td').on('click', function() { $('td').css('background-color', ''); $(this).css('background-color', 'red'); }) function togCell() {} 

 table { cursor: text; } td { font-size: 14; cursor: default; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table border="1" cellpadding="8" cellspacing="2"> <tr style="background-color:white;"> <td onclick="togCell('red')">AA</td> <td onclick="togCell('red')">AKs</td> <td onclick="togCell('red')">AQs</td> <td onclick="togCell('red')">AJs</td> <td onclick="togCell('red')">ATs</td> <td onclick="togCell('red')">A9s</td> <td onclick="togCell('red')">A8s</td> <td onclick="togCell('red')">A7s</td> <td onclick="togCell('red')">A6s</td> <td onclick="togCell('red')">A5s</td> <td onclick="togCell('red')">A4s</td> <td onclick="togCell('red')">A3s</td> <td onclick="togCell('red')">A2s</td> </tr> <tr style="background-color:white;"> <td onclick="togCell('red')">AKo</td> <td onclick="togCell('red')">KK</td> <td onclick="togCell('red')">KQs</td> <td onclick="togCell('red')">KJs</td> <td onclick="togCell('red')">KTs</td> <td onclick="togCell('red')">K9s</td> <td onclick="togCell('red')">K8S</td> <td onclick="togCell('red')">K7s</td> <td onclick="togCell('red')">K6s</td> <td onclick="togCell('red')">K5s</td> <td onclick="togCell('red')">K4s</td> <td onclick="togCell('red')">K3s</td> <td onclick="togCell('red')">K2s</td> </tr> </table>