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>