How do I set the id of an apex:pageBlockTable row?

Question

I'd like to be able to assign each row in a table an Id so I can easily find the row(s) later using JavaScript. I see where I can set the id of the table but I'd like to also assign an id to each row with a unique value that will make the row I want easy to find.

Answer 1

  <apex:page standardController="Account">
     <apex:variable value="{!1}" var="rowNum"/>

 <table>
    <apex:repeat value="{!Account.contacts}" var="item">
      <tr id="hello{!rowNum}"><td>{!item.Name}</td></tr>
     <apex:variable var="rowNum" value="{!rowNum + 1}"/>
   </apex:repeat>
  </table>
</apex:page>

Another solution using apex variable

Answer 2

If you want to use HTML5 you can take advantage of the custom attributes prefixed with 'data-'. I use this in tables where I want to grab rows and know the SF Id for javascript remoting.

See the sample below from a table I use and then perform actions on the rows using JS remoting

<apex:outputPanel id="topAccounts">         
    <div  id="topAccounts" class="myTable">                 
        <table >
            <tr>
                <td>Name</td>
                <td>Reason</td>
                <td>Executive Sponsor</td>
            </tr>
            <apex:outputPanel rendered="{!noAccounts}">
            <tr>
                <td>No Accounts Listed</td>
                <td>N/A</td>
                <td>N/A</td>
            </tr>
            </apex:outputPanel>
            <apex:repeat value="{!topAccounts}" var="a">
                <tr data-SFid="{!a.Id}">
                    <td><div class="removeButton account" style="float:left;position:absolute;"><apex:image style="width:16px; height:16px;" url="{!URLFOR($Resource.VF_Images, 'delete-32.png')}"/></div>{!a.Name}</td>
                    <td><div class="output account">{!a.Territory_Plan_Top_Account_Reason__c}</div><div class="inlineEdit"><apex:inputField value="{!a.Territory_Plan_Top_Account_Reason__c}"/></div></td>
                    <td><div class="output account">{!a.Territory_Plan_Top_Account_Executive__c}</div><div class="inlineEdit"><apex:inputField value="{!a.Territory_Plan_Top_Account_Executive__c}"/></div></td>
                </tr>
            </apex:repeat>
        </table>                    
    </div>
</apex:outputPanel>

The important snippet being the inside the repeat tag

<apex:repeat value="{!topAccounts}" var="a">
    <tr data-SFid="{!a.Id}">

This is assigning the SF id to a custom attribute of the . This will allow us to get the element using javascript later on, and to know the SF id of the object within the

EDIT

Effectively each row in the table has a unique identifier, and as a bonus it carries the SF Id of the object being presented in that row.

I have some jQuery on a button that resides in each row, that goes and gets the Salesforce ID for that row and passes it into a function that has my JS remoting call in it

j$('.removeButton.account').click(function(){
     console.log(j$(this).closest('tr').attr('data-SFid'));
     removeAccount(j$(this).closest('tr').attr('data-SFid'));
});

If you just want to get the <tr> element in JavaScript, then do:

var tr = $("tr").find("[data-SFid='" + id + "']");

Answer 3

When you assign an id to a row in a repeat tag, the id value is a concatenated string of the thePageId:theRepeatId:theRowId. There's quite a good blog post about how this works, with references to the Salesforce documentation:

http://watro.tumblr.com/post/9615587212/getting-ids-with-jquery-on-apex-tags

Answer 4

As @GreenStork mentioned there is a deterministic way to identify the id of row in a page block table, but you're not able to directly set the ids of the rows.

If you're having trouble finding a particular row based on a different attribute then the row number you might consider inserting a bonus element into one of the page block table columns with an id you define that can then be traversed up to the parent <tr>.

Another option would be to take a look at the rowclasses attribute of the pageblock table which allows you to supply a comma-separated list of CSS classes that get applied in a repeating order and which can be used to find a particular row.

Beyond that we'd need to know more about your use case and why @GreenStork's approach isn't easy enough for you to provide better suggestions.

Answer 5

OK so I resolved my problem by rewriting the page. There isn't a way I can control the ID of a tag from the apex:pageBlockTable tag so I built the table with standard and tags. I then used the apex:repeat tag for the iteration through the records. I thought this would be my only option but I was hoping there would be a way to not to have to rewrite the page. Now that I can set the id of the record, it is very easy to find the record using javascript.

Thanks for the suggestions though. This is still a learning process.