CODEWITHSUNDEEP
javascript
Mohammad I
Mohammad I

Reputation: 90

JavaScript remove class from table rows

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

Upvotes: 0

Views: 403

Answers (2)

Mohammad I
Mohammad I

Reputation: 90

I ended up adding below code and issue resolved.

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

Upvotes: 0

Kokodoko
Kokodoko

Reputation: 28128

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

Upvotes: 1

Related Questions