get data when click on row in pageBlockTable

Question

I have a pop-up display a table with some columns (Name, ID) of Accounts for example, I want to display additional information of the selected account when I click on specific row.

I used something like this, but I must click on a column not row , and does not get the correct data.

<apex:actionFunction name="readCell" action="{!readCellMethod}">
        <apex:param name="rowID" value="" assignTo="{!clickedRowId}"/>
</apex:actionFunction>

<apex:pageBlockTable value="{!account}" var="acc">                                    
   <apex:column headerValue="ID" value="{!acc.Id}" />
   <apex:column headerValue="Name" value="{!acc.Name}" onclick="readCell('{!acc.Id}')"/>
</apex:pageBlockTable>

Answer 1

Here's an option that still keeps your pageBlockTable. Add your jquery resource or link to it. Then, add this to head...

<apex:includeScript value="{!URLFOR($Resource.jQuery, '/js/jquery-1.4.2.min.js')}"  />
<script type="text/javascript">
    $j = jQuery.noConflict();
    function clickElem(elem){
        alert($j(elem).find(".accId").html());
    }
</script>

Add the onRowClick to the pageBlockTable and add a styleClass to your column.

<apex:pageBlockTable value="{!account}" var="acc" onRowClick="clickElem(this);">                                    
   <apex:column headerValue="ID" value="{!acc.Id}" styleClass="accId" />
   <apex:column headerValue="Name" value="{!acc.Name}" />
</apex:pageBlockTable>

Woo-hoo! First post on stackexchange...

Answer 2

You can achieve this by using <apex:repeat> instead of <apex:pageBlockTable>. You'll need to use HTML table instead of visualforce components and make additional effort to add some CSS classes (like headerRow, list) to make it look like apex:pageBlockTable.

So the code could like this:

<apex:actionFunction name="readCell" action="{!readCellMethod}">
    <apex:param name="rowID" value="" assignTo="{!clickedRowId}"/>
</apex:actionFunction>

<table cellspacing="0" cellpadding="0" border="0" class="list">
    <apex:repeat value="{!account}" var="acc">
        <tr class="headerRow">
            <th class="headerRow">
                <apex:outputText value="{!$ObjectType.Account.fields.Id.label}"/>
            </th>
            <th class="headerRow">
                <apex:outputText value="{!$ObjectType.Account.fields.Name.label}"/>
            </th>
        </tr>
        <tr id="row{!acc.Id}">
            <script>
                document.getElementById('row{!acc.Id}').onclick = function() {
                    return readCell('{!acc.Id}')
                };
            </script>
            <td>
                <apex:outputText value="{!acc.Id}"/>
            </td>
            <td>
                <apex:outputText value="{!acc.Name}"/>
            </td>
        </tr>
    </apex:repeat>
</table>