I have a table that highlight the tr (row) on click, and I can highlight multi rows on every click but I want to have only one row to be highlight in table. how to remove the highlight class from sibling rows. code below
JavScript
document.querySelector("table").addEventListener("click", function (e) { // Is it a click on a tr in this table? var tr = e.target.closest("tr"); if (tr && this.contains(tr)) { // Yes, toggle highlight tr.classList.toggle("highlight"); } });
css
.highlight { background-color: #ffeaea; }
Advertisement
Answer
I ended up adding below code and issue resolved.
$('.table tr').removeClass("highlight");