фокус ячейки таблицы на мыши - 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

Try:

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

И

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

Answer 2

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

JS:

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

CSS:

td.focus { 
    background-color:Blue; 
} 

Этот способ фокусировки td будет unfocus ничего, что могло бы иметь .focus класс, а затем установить его на выбранный элемент.

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

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

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

Answer 3

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

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

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