如何使用jQuery实现多维tr/td表格中单个单元格的单选切换？

没问题，我帮你调整代码实现全局单选的效果～你的需求是整个表格里只能选中一个单元格，点击新单元格时自动取消之前的选中状态，原来的代码只限制了当前行内的切换，我们只需要把移除选中样式的范围从「当前行的td」改成「整个表格的td」就可以了。

修改后的JavaScript代码 #

$("#cube_power_grid").on("click", "td", function () {
  // 移除整个表格中所有td的选中样式
  $("#cube_power_grid td").removeClass("selected_power");
  // 给当前点击的td添加选中样式
  $(this).addClass("selected_power");
});

完整代码示例 #

下面是整合后的完整代码，你可以直接使用：

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<body>
  <table id="cube_power_grid">
    <tr>
      <td>3</td>
      <td>5</td>
      <td>8</td>
    </tr>
    <tr>
      <td>10</td>
      <td>12</td>
      <td>15</td>
    </tr>
    <tr>
      <td>20</td>
      <td>25</td>
      <td>30</td>
    </tr>
  </table>
</body>
</html>

CSS

#cube_power_grid {
  width: 30vw;
  font-family: Varela Round;
  box-shadow: 0px 0px 6px 2px rgb(137, 57, 210);
}
#cube_power_grid tr {
  text-align: center;
  height: 10vh;
}
#cube_power_grid td {
  text-align: center;
  border-radius: 5px;
  cursor: pointer;
  background: linear-gradient(126deg, rgba(143,61,217,1) 12%, rgba(109,35,177,1) 43%, rgb(101, 34, 162) 72%);
  color: #FFF;
}
#cube_power_grid td:hover {
  background: #FFF;
  color: #712870;
  box-shadow: 0px 0px 6px 2px rgb(137, 57, 210);
}
.selected_power {
  background: #FFF !important;
  color: #712870 !important;
  box-shadow: 0px 0px 6px 2px rgb(137, 57, 210) !important;
}

原理说明 #

原来的代码中$(this).parent().find("td")只会选中当前点击单元格所在行的所有td，所以只能实现单行内的单选切换。现在改成$("#cube_power_grid td")，会选中表格内所有的td，这样就能一次性移除所有单元格的选中样式，再给当前点击的单元格添加样式，从而实现全局唯一选中的效果。

内容的提问来源于stack exchange，提问作者JSRB