h : JSF2의 dataTable 행이 번갈아 표시됩니다.

JSF2에서 행을 번갈아 가며 사용하려고합니다. : richTables 등의 데이터 테이블이 있지만 예상치 못한 결과가 발생합니다. 테이블은 만들어졌지만 흰색 그리드가 표시되어 있습니다 (그러나 테두리는 지정하지 않았습니다). 그리고 각 행 아래에는 buttom 행이 없습니다.h : JSF2의 dataTable 행이 번갈아 표시됩니다.

CSS의 :

.order-table{ 
border-collapse:collapse; 
} 

.order-table-header{ 
text-align:center; 
background:none repeat scroll 0 0 #E5E5E5; 
border-bottom:1px solid #95bce2; 
padding:16px; 
} 

.order-table-odd-row{ 
text-align:center; 
background:none repeat scroll 0 0 #FFFFFFF; 
border-top:1px solid #000000; 
} 

.order-table-even-row{ 
text-align:center; 
background:none repeat scroll 0 0 #ecf6fc; 
border-top:1px solid #BBBBBB; 
} 

table.order-table tr.over { 
background-color: #bcd4ec; 
}

표 :

<h:dataTable id="personsTable" value="#{personController.allPersons}" var="bean" 
    styleClass="order-table" headerClass="order-table-header" 
        rowClasses="order-table-odd-row,order-table-even-row"> 
    <h:column> 
    <f:facet name="header"> 
    <h:outputText value="First Name" /> 
    </f:facet> 
    <h:outputText value="#{bean.firstName}"/> 
    </h:column> 
    <h:column> 
    <f:facet name="header"> 
    <h:outputText value="Last Name" /> 
    </f:facet> 
    <h:outputText value="#{bean.lastName}"/> 
    </h:column> 
    <h:column> 
    <f:facet name="header"> 
    <h:outputText value="Phone" /> 
    </f:facet> 
    <h:outputText value="#{bean.phone}"/> 
    </h:column> 
    </h:dataTable>

작은 JQuery와 스크립트 :

<script type="text/javascript"> 
    $(document).ready(function(){ 
    $(".order-table tr").mouseover(function(){ 
    $(this).addClass("over"); 
    }); 
    $(".order-table tr").mouseout(function(){ 
    $(this).removeClass("over"); 
    }); 
    }); 
    </script>

결과는이 (돈 전에서 나온 흰색 격자를 통지 그리고 CSS에서 오는 밑줄도 없음) :

http://imagebin.org/132574

출처

2011-01-14 Benchik

마지막으로 내가 어려운 답을 찾을 : 내가 뭘 누락 된 것은 : 테이블 선언의 규칙 = "없음". 이 누락 된 선언은 내 CSS를 엉망으로 만들고 부분적으로 무시했습니다. 이제 CSS가 완전히 작동합니다.

출처

2011-01-16 21:09:17 Benchik

h : JSF2의 dataTable 행이 번갈아 표시됩니다.

답변

관련 문제