Add CSS Class in Parent Node of Element in Lightning Component

Hello friends, In this post you will learn, how to add css class in parent node of a html element. This is very helpful for those people who want to highlight element dynamically. So let's get started,

Add css class in parent node of element in lightning component

In this example, I have provide two types of action, first one to highlight table row and second one to highlight column of table.

AddCss.cmp

 <aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome" access="global" >        
    <table>
        <tr>
            <td>
                <b>Row Highlight</b>            
            </td> 
            <td>
                <b>Employee Name</b>  
            </td>
            <td>
                <b>Column Highlight</b>  
            </td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" onclick="{!c.highlightrow}"/>                
            </td>
            <td>
                <b>First Employee</b>
            </td>
            <td>
                <input type="checkbox" onclick="{!c.highlightColumn}"/>                
            </td>
        </tr>
    </table>    
 </aura:component>

AddCssController.js

 ({
    //used to highlight row
    highlightrow : function(component, event, helper) {        
        if(event.target.checked){
            $A.util.addClass(event.target.parentNode.parentNode,'rowhighlight');     
        }
        else{            
            $A.util.removeClass(event.target.parentNode.parentNode,'rowhighlight'); 
        }
    },
    
    //used to highlight column
    highlightColumn : function(component, event, helper) {        
        if(event.target.checked){
            $A.util.addClass(event.target.parentNode,'rowhighlight');     
        }
        else{            
            $A.util.removeClass(event.target.parentNode,'rowhighlight'); 
        }
    }
 })

AddCss.css

 .THIS .rowhighlight {
    background-color:red;
 }

Output:

Hope you like this post, for any feedback or suggestions please feel free to comment. I would appreciate your feedback and suggestions.
Thank you.