[SalesForce] Highlight row on selected ( apex repeat )

I need to highlight the row on click of anchor link.

 <apex:repeat value="{!Requests}" var="request">
                                <tr>

                                    <td><a onclick="sendRequestId('{!request.Id}');"> {!request.Subject} </a></td>
                                    <td>{!request.Type}</td>
                                    <td>{!request.Location__r.Name}</td>
                                    <td>
                                        <apex:outputText value="{0,date,MM/dd/yyyy}" >
                                            <apex:param value="{!request.CreatedDate}"/>
                                        </apex:outputText>
                                    </td>

                               </tr>
                            </apex:repeat>

Best Answer

One possible non-jQuery solution:

<script>
    function findParent(el, tagName) {
        tagName = tagName.toLowerCase();
        do {
            el = el.parentNode;
            if (el.tagName.toLowerCase() === tagName) {
                return el;
            }
        } while (el.parentNode);

        return null;
    }

    function highlight(element, tagName) {
        if (element && tagName) {
            var thingToHighlight = findParent(element, tagName);
            if (thingToHighlight) {
                thingToHighlight.style = 'background-color: yellow';
            }
        }
    }
</script>

Your hyperlink likely needs an href attribute which I've added to the example. I've then added another function to perform the highlighting of the closest parent tr element with a yellow background. The onclick function might need to return false; depending on the behavior you're expecting from the click of the link.

<apex:repeat value="{!Requests}" var="request">
<tr>

    <td><a href="#" onclick="sendRequestId('{!request.Id}'); highlight(this, 'tr');"> {!request.Subject} </a></td>
    <td>{!request.Type}</td>
    <td>{!request.Location__r.Name}</td>
    <td>
        <apex:outputText value="{0,date,MM/dd/yyyy}" >
            <apex:param value="{!request.CreatedDate}"/>
        </apex:outputText>
    </td>

</tr>
</apex:repeat>
Related Topic