1

I have the following JQuery within a custom HTMLSnippet Widget: $(".table tr").click(function(){ $(this).toggleClass("highlight"); }); It is supposed to apply this class to the data grid table rows when they are clicked: .highlight{ background-color: red; } However, it only toggles the class for the first row. I.E the row containing the table header. The class is not applied for any of the other rows when clicked. However, when inspecting the elements I noticed that the data grid is composed of two tables. One table has the mx-datagrid-head-table class and the other has the mx-datagrid-body-table class. I don't see why the data grid should be made up of two separate tables... and I find it odd that only the head-table applies the css when both elements share the "table" class.   Here is the custom HTML Snippet widget in its entirety:   This is the result of my JQuery:   The blue stripe is me attempting to click a row and apply the css, but as you can see it doesn't stick and only works for the header table. Any help would be much appreciated. Thanks.  

asked 2018-07-06

1 answers