Question

我想在HTML表中选择一个单元格。目前，我使用这个：

$("td").click(function(){
    $(this).addClass("selected").siblings().removeClass("selected");
});

我的CSS是：

td:hover, td.selected {
   background-color: #FF9900
}
td {padding: 5px;}

悬停效果很好，但是当我单击一个单元格时，它不会保持选中状态。

我该如何解决

编辑

您是对的，我应该给您更多背景信息。我必须为大学做一个JavaFx程序。但是JavaFX没有提供我想要的表。因此，我决定在应用程序的这一部分获取一个WebView并通过StringBuilder制作表。在下面的内容中，您将看到我的当前输出（通常，在标题中，css和脚本链接为此将其删除）： https://jsfiddle.net/5c861zrg/

因此在这种情况下将无法正常工作

Answer 1

我能够使您的代码正常工作，但是不会取消选择同一列的多个单元格。所以我只是将其修改为此。试试看。保持CSS不变。

$("td").click(function(){
    $("td.selected").removeClass("selected");
    $(this).addClass("selected");
});

Answer 2

您的问题是您还有另一行siblings（）无法用于另一行尝试做

$("td").click(function() {
  $(".selected").parent().find('td').removeClass("selected");
  $(this).addClass("selected").siblings().removeClass("selected");
});

首先，您应该找到.selected类，然后转到父类，然后到达父类的td，最后删除想要的类

如何在HTML表格中选择并突出显示单个单元格

2 个答案: