如何使用JavaScript单击并将最后一个更改单元更改为原始格式来更改HTML表格单元格（交换机）

Question

我有一个HTML表格，每个单元格的值都为“Off”。当用户点击某个单元格时，我只想将该单元格的值更改为“开启”，如果用户单击另一个单元格将其更改为“开启”，则将先前更改的单元格恢复为“关闭”。 IE浏览器。只有一个单元格显示为“开”，其他所有单元格都将显示为“关”。

<script type="text/javascript"> 
    $('#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"; 
     } 
    } 
</script> 

我可以改变为“开”，但我不知道如何设置其他：这必须使用JavaScript和JQuery只（不angularJS）

<table id="switchboard-container"> 
    <tbody> 
     <tr> 
      <td class="switch">Off</td> 
      <td class="switch">Off</td> 
     </tr> 
     <tr> 
      <td class="switch">Off</td> 
      <td class="switch">Off</td> 
     </tr> 
    </tbody> 
</table> 

这是我尝试做细胞“关闭。有人可以帮忙吗？

Answer 1

看看这个小提琴： https://jsfiddle.net/3fh4mLba/1/

基本上，增加$(".switch").text("Off");将文本设置为“关闭“，然后再将其更改为开启。

Answer 2

你可以有一个简单的点击处理程序来做到这一点

$('#switchboard-container td.switch').click(function() { 
 
    var $this = $(this); 
 
    if ($this.hasClass('on')) { //if the current element is on then we can just make it off 
 
    $this.text('Off'); 
 
    } else { 
 
    $this.text('On'); //make the current td on 
 
    $('#switchboard-container td.switch.on').removeClass('on').text('Off'); //make other td which are on as off 
 
    } 
 
    $this.toggleClass('on'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<table id="switchboard-container"> 
 
    <tbody> 
 
    <tr> 
 
     <td class="switch">Off</td> 
 
     <td class="switch">Off</td> 
 
    </tr> 
 
    <tr> 
 
     <td class="switch">Off</td> 
 
     <td class="switch">Off</td> 
 
    </tr> 
 
    </tbody> 
 
</table>