Add the class for specific row of existing table

Question

I want to add the class to existing table row to change the row color when row is clicked.

For now my code is like this below.

Subscribe onClick for grid.

 grid.onClick.subscribe(function(e, args) {
    var row = self.grid.getDataItem(args.row);
    // How can I add the class to the specific row??? 
 }

What ideas do you have that might work? – Dexygen Dec 28 '18 at 15:34 — Dexygen, Dec 28 '18 at 15:34

score 1 · Answer 1 · answered Dec 28 '18 at 15:35

1

If you can get the element you can just use the classList property:

https://developer.mozilla.org/en-US/docs/Web/API/Element/classList

element.classList.add("anotherclass");

answered Dec 28 '18 at 15:35

Pete

4,542
9
43
76

Michael Villani · Answer 2 · 2019-01-08T15:21:58.613

I'd suggest you to first get the cells in the clicked row. You can do this by for example by first getting the target element (the clicked cell), then getting its parent (the row) and then getting the children from the parent (all cells in the row). Then iterate over them and change their style. It is important to use the cells, not the row itself as the cells are on a higher z-index than the row.

var children = $($(e.target)[0].parentElement).children();
for (var key in children) {
    if(children.hasOwnProperty(key))
        children[key].style["background-color"] = "red";
}

you could of course also add the class where I manipulated the style by using $(children[key]).addClass("yourClass")

Add the class for specific row of existing table

2 Answers2