更改一行中丰富的背景颜色：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; 
}