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;
}
Best Answer
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 -
It will add the class to the row of the checkbox checked.
Let me know if that serves your purpose.