点击时聚焦表格单元格 - jQuery

Question

我有一个HTML表格，

当任何单元格被点击时，我想使用CSS突出显示该单元格，直到另一个单元格被点击

我以为，我将为该单元格设置焦点并设置焦点的CSS

但它没有起作用..

我的代码如下：

$('td').click(function (event) {
    //$(this).tabindex = 0; 
    //$(this).tabindex = 1;
    $(this).focus();
});

并且CSS如下所示：

td:focus
{
    background-color:Blue;
}

我想我无法向 td 添加类，因为当其他单元格被点击时，我必须先删除这个类。

请帮我实现我的要求。

此外，请告诉我是否有其他方法可以实现这个功能或者是否有任何变通方法。

- techBeginner

Answer 1

尝试：

$('td').click(function (event) {
      $('td').removeClass('focus'); //Remove focus from other TDs
     $(this).addClass('focus');
});

并且

td.focus { background-color:蓝色; }

- Derk Arts

Answer 2

首先，:focus 用于表单 input 字段，我怀疑它不能应用于任何其他元素。您应该使用自己的类：

JS:

$('td').click(function (event) {
    $('*').removeClass('focus');
    $(this).addClass('focus');
});

CSS：

td.focus {
    background-color:Blue;
}

通过这种方式，聚焦于一个 td 将取消其他可能有 .focus 类的元素的聚焦状态，然后将其设置在所选元素上。

你也可以这样做：

$('*').click(function(event){
    $(this).removeClass('focus');
});
$('td').click(function (event) {
    $(this).addClass('focus');
});

点击任何东西都会取消焦点td（类似于:focus在输入字段上的行为或:active在锚标签上的行为）

- wyqydsyq

Answer 3

如果你想让它们保持“聚焦”状态，直到再次点击，你可以使用方便的toggleClass函数。

在这里查看fiddle示例：http://jsfiddle.net/eVS9f/5/。

$("td").click(function() {
    $(this).toggleClass("focus");
    });

- Richard Logwood

---

那不是他需要的：“当其他单元格被点击时，我必须删除这个类，然后...” - Derk Arts

我明白了，只是展示toggleClass和一个jsfiddle工作示例来说明点击/取消点击的替代方案。当我完成我的jsfiddle示例时，你的答案已经发布了，所以我改成了toggle并发布以在这个线程中添加更多信息。 - Richard Logwood