стилизация последней записи в формате данных 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 (который в наши дни отвратительный ), то вы не можете сами генерировать строку классов строк (не классов столбцов!) Внутри управляемого компонента.

<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;
}