풍부한 행의 배경색 변경 : dataTable

Question

나는 열이 하나 인 링크가 풍부한 rich : datatable 행이 있습니다. 이 클릭 Onclick 내가 선택한 행의 배경색을 변경해야합니다. 내가 어떻게 이걸 얻을 수 있니?

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> 

자바 스크립트 :

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> 

다음에 자바 스크립트를 변경 :

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

:

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

Answer 2

이 링크에 온 클릭 메소드를 추가

당신이 뭔가를 할 수있는 링크를 수행하려면

스크립트 (jQuery 사용)는 셀의 tr을 찾고 스타일을 적용합니다 :

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

예에 대한 CSS

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