Javascript 富数据表在JSF中突出显示一列，并且一次只突出显示一列

在我的rich

DataTable

中有一列包含命令链接，当我单击一个链接时，它应该高亮显示，如果单击其他链接，第一个链接应该变为正常，其他链接应该高亮显示

`函数Jquery

function highlightSingleRow(col) {
    jQuery(col).parent().parent().find('tr').removeClass('dashBoardPowerOutP1');
    jQuery(col).parent().addClass('dashBoardPowerOutP1');
}

样式类

.dashBoardPowerOutP1{
    background-color: yellow;
}

Rich:

DataTable

列，其中我需要更改：

     <rich:column sortBy="#{boardList.ci}" styleClass="#{boardList.dashBoardStyle}">
                    <a4j:commandLink actionListener="#       {globalCommandCenter.getWidgetDetails}" reRender="widgetPanel,knowledgeDetailsPanel,knowledgeDetailsTable,knowledgePanelLoader,ticketDetailsPanel,ticketDetailsTable,ticketDetailsPanelLoader"
                                            style=" font-family:Calibri; FONT-SIZE: 10px;color: #F5857C; " 
                                            onclick="Richfaces.showModalPanel('loaderImage1');" 
                                            oncomplete="Richfaces.hideModalPanel('loaderImage1');loadRemainingWidgets();highlightSingleRow(this);">
                                            <h:outputText value="#{boardList.ci}" ></h:outputText>
                                            <f:attribute name="ciName" value="#{boardList.ci}" />
                                            **<a4j:support event="onRowClick"  />**
                                        </a4j:commandLink>  
                </rich:column>`

****
`

尝试以下操作：删除父级

tr

中所有

td

s的

仪表板电源输出1

类，然后将同一类应用于单击链接的父级

td

function highlightSingleRow(col) {
    jQuery(col).closest('tr').find('.dashBoardPowerOutP1').removeClass('dashBoardPowerOutP1');
    jQuery(col).closest('td').addClass('dashBoardPowerOutP1');
}