title: How to change HTML table cell by clicking and changing last change cell to original using JavaScript – (Switchboard)
body: <p>I have a HTML table, and each cell has a value “Off”. When a user click on a cell I want to change that value of only that cell to “On” and if the user click another cell change it to “On” put the previously changed cell back to “Off”. Ie. Only one cell shows as “On” and all the others will be “Off”. This must be done using JavaScript and JQuery only (NOT angularJS)</p>
  
  <pre><code>&lt;table id="switchboard-container"&gt;
      &lt;tbody&gt;
          &lt;tr&gt;
              &lt;td class="switch"&gt;Off&lt;/td&gt;
              &lt;td class="switch"&gt;Off&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td class="switch"&gt;Off&lt;/td&gt;
              &lt;td class="switch"&gt;Off&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>Here is what I tried:  </p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      $('#switchboard-container td').click(function ()
      {
          setClickHandlers();
      });
  
      function setClickHandlers() {
          // Click handlers that change the content of switches to 'On' or 'Off'.
          var cells = document.querySelectorAll('# switchboard -container td');
  
          Array.prototype.forEach.call(cells, function (td) {
              td.addEventListener('click', changeCell);
          });
      }
  
      function changeCell() {
          if (this.textContent == "On")
          {
              this.textContent == "Off";
          }
          else
          {
              this.textContent = "On";
          }
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>I can change to “On” but I don’t know how to set other cells to “Off. Can some one please help?</p>