0

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

Markup

<table class="slds-table slds-table_bordered slds-table_resizable-cols slds-table_fixed-layout slds-no-cell-focus slds-table_edit" role="grid">
    <tbody>
        <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"/> 
              </span>
                </td>
            </tr>
        </aura:iteration>
    </tbody>
</table>

Controller

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

Style

.THIS .setSelected{
    background-color: #EEE;
}
3
  • 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

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.

0

You must log in to answer this question.

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