JavaScript remove class from table rows

Question

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;
    }

Either loop through all other table rows, and explicitly remove the class from those (or loop over all rows and remove it, but the you will have to add it to the current row afterwards, instead of toggling it on that one) - or remember the last clicked row in a variable, so that you can toggle the class off specifically for that one again first. — C3roe
– C3roe, Commented Aug 22, 2022 at 10:01

Kokodoko · Accepted Answer · 2022-08-22 10:28:59Z

1

If you don't mind I used @CBroe's suggestion here, to remember the previously selected TR:

let prevTr = undefined

document.querySelector("table").addEventListener("click", function (e) {
    let tr = e.target.closest("tr");
    if (tr && this.contains(tr)) {
        if(prevTr) prevTr.classList.remove("highlight")
        tr.classList.add("highlight");
        prevTr = tr
    }
});

answered Aug 22, 2022 at 10:28

Kokodoko

28.3k37 gold badges132 silver badges208 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mohammad I · Accepted Answer · 2022-08-26 00:24:10Z

0

I ended up adding below code and issue resolved.

 $('.table tr').removeClass("highlight");

answered Aug 26, 2022 at 0:24

Mohammad I

905 bronze badges

Collectives™ on Stack Overflow

JavaScript remove class from table rows

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related