Good day to all!
Help with TK ...
There is a table. In each cell in the image. It is necessary that when clicking on a cell, it is highlighted. When clicking on another cell, the backlight went to a new cell and disappeared into the old one.
I have been thinking about how to implement it for a day, but I cannot lose focus ...

  • class change and everything - zb '

2 answers 2

Switch active class:

CSS:

.clickable > tbody > tr > td.active { background: red; color: black; }

Html:

 <table class="clickable"> <tr><td>1</td><td>a</td><td>d</td><td>a</td></tr> <tr><td>2</td><td>a</td><td>d</td><td>a</td></tr> <tr><td>3</td><td>a</td><td>d</td><td>a</td></tr> <tr><td>4</td><td>a</td><td>d</td><td>a</td></tr> </table>

Js:

 $('.clickable > tbody > tr > td').click(function() { //добавить класс себе, убрать у других элементов в этой же таблице $(this).addClass('active').parents('.clickable').children('tbody').find('> tr > td.active').not(this).removeClass('active'); });

demo

  • one
    Only in my opinion you confused a line and a cell of the table. I think that after all it will be more accurate according to the task of the vehicle. - Deonis
  • About exactly, sec - zb '
  • corrected, at the same time selectors did more precisely - zb '
  • @eicto helped thanks - igolka97

Set the class your tr lines, and use either css с :hover т.е. .myLine:hover { background-color: #eef; } css с :hover т.е. .myLine:hover { background-color: #eef; } css с :hover т.е. .myLine:hover { background-color: #eef; } or jQuery on the same principle, for example $(".myLine").click(function() { $(this).attr({'backgroundColor': '#eef'}) }); something like that. Hope this helps you. There are examples of originalip.ru , but if it’s not easy for you, go to jquery-docs.ru and ask in the attr search that the site will give you what you need in an accessible format.