将表格单元格聚焦在点击上 - jquery答案

【问题标题】：focus a table cell on click - jquery将表格单元格聚焦在点击上 - jquery
【发布时间】：2012-01-26 15:58:12
【问题描述】：

我有一个 HTML 表格，

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

我想，我将为那个单元格设置焦点并设置 css 为焦点

但它不起作用..

我的代码如下：

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

和css如下

td:focus
{
    background-color:Blue;
}

我想，我不能将类添加到td，因为当其他单元格点击时我必须删除这个类..

请帮我实现我的要求。

如果有任何其他方法可以实现此目的或任何变通方法，请告诉我..

【问题讨论】：

【解决方案1】：

试试：

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

和

td.focus { 背景颜色：蓝色； }

【讨论】：

【解决方案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 作用于锚标签的行为）

【讨论】：

【解决方案3】：

如果您想让它们“集中”直到您再次单击，您可以使用方便的 toggleClass 功能

在此处查看小提琴示例：http://jsfiddle.net/eVS9f/5/

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

【讨论】：

这不是他需要的：when other cell clicked I have to remove this class then..
我明白，只是用一个 jsfiddle 工作示例显示 toggleClass 来说明单击/单击关闭替代方案，当我完成我的 jsfiddle 示例时，您的答案已经发布，所以我将其更改为切换和发布以在此线程中添加更多信息