сфокусировать ячейку таблицы на клике - jquery

Question

У меня есть таблица HTML,

при нажатии любой ячейки я хочу выделить эту ячейку с помощью css, пока не будет нажата другая ячейка

Я думал, я установлю фокус для этой ячейки и установлю CSS для фокусировки

но не работает ..

мой код выглядит так:

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

и css следующим образом

td:focus
{
    background-color:Blue;
}

Я думаю, я не могу добавить класс к td, потому что, когда щелкает другая ячейка, я должен удалить этот класс ..

Пожалуйста, помогите мне выполнить мое требование.

Также, пожалуйста, дайте мне знать, если есть какой-либо другой способ добиться этого или каких-либо обходных путей ..

Answer 1

Попробуйте:

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

И

td.focus { цвет фона: синий; }

Answer 2

если вы хотите, чтобы они были «сфокусированными», пока вы не нажмете снова, вы можете использовать удобную функцию toggleClass

см. Пример скрипта здесь: http://jsfiddle.net/eVS9f/5/

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

Answer 3

Для начала, :focus используется для полей формы input, я сомневаюсь, что это может быть применено к любым другим элементам.Вы должны использовать свой собственный класс:

JS:

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

CSS:

td.focus {
    background-color:Blue;
}

Таким образом, фокусировка td будет расфокусировать все, что может иметь.focus class, затем установите его на выбранном элементе.

Вы также можете сделать:

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

Таким образом, нажатие на что-либо не сфокусирует фокус (аналогично тому, как:Фокус работает на полях ввода или как: активный работает на тегах привязки)