I have a Lightning component with HTML table, with one of the columns being a checkbox. I am trying to change table row style when the checkbox is selected, by using $A.util.toggleClass in the onchange event of the checkbox, but the style class does not apply to the row. Can someone help?

Edit - Including relevant code


<table class="slds-table slds-table_bordered slds-table_resizable-cols slds-table_fixed-layout slds-no-cell-focus slds-table_edit" role="grid">
        <aura:iteration items="{!v.records}" var="lineItem" indexVar="i">
            <tr class="slds-hint-parent" aura:id="parentRow">
                <td class="slds-cell-edit" role="gridcell">...</td>
                <td class="slds-cell-edit" role="gridcell">
                    <span class="slds-checkbox">
                <lightning:input aura:id="select-row" type="checkbox" class="field" onchange="{!c.selectRow}" name="{!'checkbox-' + (i+1)}" tabindex="-1" variant="label-hidden" label="Select all"/> 


selectRow : function(component, event, helper) {
    var items = component.find('select-row')
        parentRow = component.find("parentRow");
    $A.util.toggleClass(parentRow, "setSelected");


.THIS .setSelected{
    background-color: #EEE;
  • 4
    Please edit your question to include the relevant code. What you're doing is possible, but without having a starting point, it's hard to point you in the right direction.
    – sfdcfox
    Commented Dec 27, 2018 at 15:42
  • @sfdcfox - Apologies. I've included the relevant code.
    – yeselkay
    Commented Dec 27, 2018 at 15:57
  • I haven't tried it out myself, but seems like you are not getting the intended <tr> id here because you are using aura:id and that it being a literal, it will be always same for all the rows generated, most likely resulting your current code returning an array of rows. You may instead like to use a unique id or name (the same way you are constructing it for the button) on the <tr>s generated, and then get the specific row in your JS using getElementById or getElementByName and toggle the class.
    – Jayant Das
    Commented Dec 27, 2018 at 17:41

1 Answer 1


You can do it by using the $A.util.addClass method. You just need to find the parent element by using the parentElement property and then apply the class using util. Here is an example -

selectRow : function(component, event, helper) {
   $A.util.addClass(event.target.parentElement.parentElement, 'setSelected');

It will add the class to the row of the checkbox checked.

Let me know if that serves your purpose.


You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .