2

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>
6

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>
  • 1
    +1 for mentioning jQuery in a "you don't need jQuery to do this" kind of way. jQuery, while great for large applications, is little more than a crutch in Visualforce, unless you're actually leveraging a large portion of the library. – sfdcfox Dec 3 '13 at 7:48
  • @Mark Pond ..Its not highlighting the selected the row.I have added alert statement on javascript.. thingToHighlight = [object HTMLTableRowElement] – sfdc Dec 6 '13 at 21:55
  • I'm not sure why it's relevent how much of jQuery one would use. If you're already writing javascript why write methods to select a parent element when you could be using a tested, cross-browser library like jQuery which exists to do exactly that? – Phil Rymek Dec 6 '13 at 21:58
  • @PhilR Some people can't or don't want to introduce the jQuery library into their environment. Just presenting alternatives. – Mark Pond Dec 7 '13 at 17:46
  • @sf.dev can you update your question with your complete updated markup rather than just the snippit with the repeat tag? – Mark Pond Dec 7 '13 at 17:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.