There is a function that colors the pressed (active) row in blue by adding a row to the blue_row class. It is necessary to modify the function so that there is only one active row in the table. The row_summary class is the default for all rows. I just started js , so I will be grateful for the detailed answers.

 function initTableRows() { $("body").on("click","tr.row_summary", function() { var $trr = $(this); $trr.toggleClass('blue_row'); }); }

    1 answer 1

    Just before hanging a class on a new link, remove it from the old one.

     function initTableRows() { $("body").on("click", "tr.row_summary", function() { var currentActiveLink = $("tr.row_summary.blue_row"); currentActiveLink.removeClass("blue_row"); /* Нужно добавить проверку, что мы хотим просто снять класс с активной ссылки */ if(currentActiveLink[0] == this) return; var $trr = $(this); $trr.toggleClass('blue_row'); }); }

    For better performance, you can cache a new link in some variable outside, and already refer to it when removing a class

    UPD
    If you want to remove the possibility of removing the class from an already active link, then just comment out the condition check.

    • uh ... your first example worked, but now some kind of nonsense is written. - Pavel Mayorov
    • @PavelMayorov, in the first version, if we clicked on the active link, the class would still be added - ThisMan
    • but now when you press it again, it disappears completely. Hello from users with a rattling mouse. - Pavel Mayorov
    • @PavelMayorov The author had this behavior, since toggleClass deletes the class if it already has - ThisMan
    • But why did you decide that exactly this behavior is required? - Pavel Mayorov