更改一行中豐富的背景顏色：dataTable

Question

我在rich：datatable中有一行，它在其一列中有一個鏈接。點擊這個點擊我需要改變所選行的背景顏色。我怎麼能做到這一點？

Answer 1

您可以用下面的代碼做到這一點：

<a4j:form id="myfrm"> 
<rich:dataTable id="myTbl" value="#{myBean.tblData}" var="tblData"> 
    <rich:column> 
     <f:facet name="header">Col1</f:facet> 
     <h:outputText value="#{tblData}" /> 
    </rich:column> 
    <rich:column> 
     <f:facet name="header">Col2</f:facet> 
     <h:outputText value="#{tblData}" /> 
    </rich:column> 
    <a4j:support event="onRowClick" oncomplete="highlightSingleRow(this)"/> 
</rich:dataTable> 
</a4j:form> 

的Javascript：

jQuery.noConflict(); 
function highlightSingleRow(col) { 
    jQuery(col).parent().parent().find('tr').removeClass('highlight-row'); 
    jQuery(col).parent().addClass('highlight-row'); 
} 

CSS：

.highlight-row { 
    background-color: cyan; 
} 

上面的例子將突出顯示該行被點擊時。

要做到這一點，你可以做類似的鏈接：

<rich:dataTable id="myTbl" value="#{myBean.tblData}" var="tblData"> 
    <rich:column> 
     <f:facet name="header">Col1</f:facet> 
     <h:outputLink onclick="highlightSingleRow(this)" value="#"> 
      <h:outputText value="link" /> 
     </h:outputLink> 
    </rich:column> 
    <rich:column> 
     <f:facet name="header">Col2</f:facet> 
     <h:outputText value="#{tblData}" /> 
    </rich:column> 
</rich:dataTable> 

，然後改變你的javascript來：

jQuery.noConflict(); 
function highlightSingleRow(lnk) { 
    jQuery(lnk).parent().parent().parent().find('tr').removeClass('highlight-row'); 
    jQuery(lnk).parent().parent().addClass('highlight-row'); 
} 

Answer 2

添加你的鏈接上的onclick方法：

<rich:column> 
    <h:outputLink onclick="changeBackground(this)" value="#"> 
    <h:outputText value="link" /> 
    </h:outputLink> 
</rich:column> 

腳本（使用jQuery）查找單元格的tr並應用樣式：

<script> 
    function changeBackground(element){ 
     jQuery(element).parents('tr:first').addClass('backgroundRed'); 
    } 
</script> 

並且例如CSS

.backgroundRed { 
    color: #555658; 
    background-color: red; 
}