樣式在jsf數據表中的最後一條記錄

Question

我有一種情況，我有更多的數據可以容納在單行中返回到dataTable元素。爲了解決這個問題，我簡單地將結果合併成一個單元格。我在尋找的是一種方法來確定我是否已經到達結果集中的最後一個對象，這樣我可以放下用作分隔符的底部邊框。最終我不知道我會處理多少個物體。

.most { 
    background-color:cyan; 
    border-bottom:medium solid black; 
} 
.last { 
    border-bottom:none; 
} 

<h:dataTable id="myTable" value="#{flowData.selectedItem.profile}" var="profile" columnClasses="most, last"> 
<h:column> 
    <h:inputText id="_last" value="#{profile.last}" /> 
    <h:inputText id="_first" value="#{profile.first}" /> 
    <h:inputText id="_middle" value="#{profile.middle}" /> 
    <h:inputText id="_city" value="#{profile.city}" /> 
    <h:inputText id="_state" value="#{profile.state}" /> 
</h:column> 
</h:dataTable> 

在此先感謝您的任何意見。

Answer 1

這取決於您希望支持的IE瀏覽器版本。

如果你不關心IE6/7的支持，那麼你可以使用CSS2 :last-child僞類爲此。

table.yourTableClass tbody tr td { 
    background-color: cyan; 
    border-bottom: medium solid black; 
} 
table.yourTableClass tbody tr:last-child td { 
    border-bottom: none; 
} 

與

<h:dataTable ... styleClass="yourTableClass"> 

（是的，IE7支持CSS2僞類對口:first-child，但它真的不支持:last-child！）

如果你關心IE7，但不是關於IE6，那麼你也可以反過來做，用border-top而不是border-bottom其中被設置爲none上:first-child：

table.yourTableClass tbody tr td { 
    background-color: cyan; 
    border-top: medium solid black; 
} 
table.yourTableClass tbody tr:first-child td { 
    border-top: none; 
} 

不過，若你還在乎IE6（這是discutable這些天），那麼你就不能往裏走周圍產生排類的字符串youself（不列班！）託管的bean。

<h:dataTable ... rowClasses="#{flowData.rowClasses}"> 

與

public String getRowClasses() { 
    StringBuilder builder = new StringBuilder(); 
    int size = selectedItem.getProfile().size(); // getProfiles() ? 

    for (int i = 0; i < size; i++) { 
     builder.append((i + 1 < size) ? "most," : "last"); 
    } 

    return builder.toString(); 
} 

這個CSS

tr.more td { 
    background-color: cyan; 
    border-bottom: medium solid black; 
} 
tr.last td { 
    border-bottom: none; 
}