设置 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 on :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（即 现在是可讨论的），那么您就无法在托管 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;
}