样式在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; 
}