Question

I have a jsf datatable inside my form like this.

<h:form id="personId">
     <h:dataTable id="hdatatable" value="#{Person.personList}" 
            border="0" cellpadding="10" cellspacing="5"
            var="per" styleClass="order-table"
            headerClass="order-table-header"
            rowClass="order-table-odd-row,order-table-even-row"
            syle="width: 950px" >


      <h:column id="tcoulm">
        <f:facet name="header">Action</f:facet>
        <h:commandLink id="editLink" value="Edit" action="#{person.editAction(per)}"/>
        <h:commandLink id="cancelLink" value="Undo" action="#{person.undoAction()}"/>
 </h:column>

</h:datatable>
</h:form>

In the above table i am trying to access Edit and Undo actions using javascript.So, I assigned them Ids.But when I see Id of those elements in the html source it’s like this.Here there mean i guess third row of the table. I am able to see column Id in the source.

personId:hdatatable:3:editLink

If i give only Id to command Link and give ‘prependId=”false” in form still I am seeing Id of the commdndLink as below

j_id1267631877_14a2c285:editLink

If i use only form Id and commandLink Id

formId:j_id1267631877_14a2c285:editLink

How to exactly access the elements inside the datatatble column?

Answer 1

Just use

var editLink = document.getElementById("personId:hdatatable:3:editLink");

?

If you don’t want to access them individually, but you want to access them all, then much easier is to give them a style class

<h:commandLink ... styleClass="editLink" />

so that you can select them by class name instead (assuming jQuery)

var $editLinks = $(".editLink");