How do I mark and unmark a row in a table by clicking on it?


When you click on a line in a table, how to mark it by changing the background color of the line, and if you click again uncheck the background, and if you click on another line, deselect the old one and mark the new one.

How to do this using JavaScript / jQuery?

asked by anonymous 19.02.2014 / 20:52

5 answers


You can use this:

To apply on the entire line you can use $('table tr');

var tr = $('table tr:not(:first-child)');  // o :not(:first-child) é util no meu exemplo somente porque usa th
tr.on('click', function () {


I leave another code variant , slightly faster. I tested (link) and this second option is even faster.



var tr = $('table tr:not(:first-child)');
tr.on('click', function () {
    var self = this;
        if(this == self) $(this).toggleClass('colorir');
        else $(this).removeClass('colorir');


To apply in each cell you can use $('table td');

var td = $('table td');          // pôr todas as td em cache
td.on('click', function () {     // agregar um event handler para executar aquando um click
    td.not(this).removeClass('colorir');   // remover a classe em todas as td menos a que recebeu click
    $(this).toggleClass('colorir'); // adicionar/remover a classe àquela que foi clicada


CSS is the same for both options:

.colorir {
19.02.2014 / 20:59

A componentized solution (ie, which can be encapsulated) is possible using jQuery and css classes:

$("#mytable > tbody > tr").on("click", function (e) {


.ativo {
    background-color: #00F;
    color: white;

Selecting a specific table, and specific rows

The selector in the root table (i.e. #mytable ), allows you to place other tables on the page without affecting them. Just like using the > operator to get to row. This makes it possible to compose the solution.

Why use siblings to remove the active class?

In addition, removing the ativo class through siblings , leaves the solution well encapsulated to the desired table. You could have subtables inside the table, and still work.

The tbody in the middle is used to select only rows of the body, neither the footer nor the header.

Example in jsfiddle


You can use a style user-select: none so that quick clicks on the same line do not end up selecting text.

And also a cursor: pointer to indicate that the user can click there.


To get into the merits of performance, and keeping the code readable, I'll just say one thing ...

More performative example of all =)

until someone overcomes you

$("#mytable > tbody > tr").on("click", function (e) {
    var $this = $(this);
    // bem... esse não é o lugar mais recomendável para armazenar o cache, ou é?
    this.$siblings = this.$siblings || $this.siblings();
19.02.2014 / 21:03

I did not see anyone meet the requirement of the question, so here's my version:

$('#codexpl').on('click', 'tr', function () {

It allows you to select one line at a time, and when you click the marked line again, it loses its mark.


Note: fiddle was a fork based on the version of @Sergio

19.02.2014 / 21:09

You will have to first add a class named active to tr and from there on every click check if tr has the class, if you have remove it, if not you add it.


$("tr").on('click', function () {
    if($(this).hasClass("active")) {
    } else {

And set the tag for that class.

Example: {
    background-color: yelow;

You can see an example here

In this way each click will select or deselect a line.

19.02.2014 / 21:08

Or you can use a global variable to store the object that is selected.

$('<tr>').click(function () {
    objMarcado = this;
19.02.2014 / 21:01