JSF / CSS Attribute Selector
I have a table with two columns. I would like to style the value of the second column differently using CSS when it contains a specific value.
Here's the view:
<h:dataTable id="tb_USER_DETAILS" border="1" var="userDtls"
value="#{freqViewTable.freqDtlsTable}" columnClasses="keydata, occupieddata"
style="width: 250px" styleClass="overalltable">
<h:column id="frequency">
<f:facet name="header">
<h:outputText value="Frequency (Hz)" style="font-size:12pt" />
</f:facet>
<h:outputText value="#{userDtls.keyFrequency}" style="font-size: 12pt"/>
</h:column>
<h:column id="slot">
<f:facet name="header">
<h:outputText value="Slot" style="font-size:12pt" />
</f:facet>
<h:outputText id="slotdata" value="#{userDtls.occupiedFlag}" style="font-size: 12pt"/>
</h:column>
</h:dataTable>
The css file is:
table {
background : Blue ;
}
table.overalltable th {
back开发者_JAVA百科ground : Yellow;
}
table.overalltable tr {
background : White;
}
table.overalltable .keydata {
background : Orange;
}
table.overalltable .occupieddata {
background : YellowGreen;
}
Currently the .occupieddata
is YellowGreen
. I would like it to be Red
when the value is "Occupied". Something like the following:
table.overalltable .occupieddata[occupiedFlag='Occupied'] {
background : Red;
}
or like this:
table.overalltable .occupieddata[slotdata='Occupied'] {
background : Red;
}
How could I achieve this? I am using the following technologies:
- Java 1.6.0_22-b03
- JSF 1.2
- JSTL 1.2
- Eclipse 3.6.0 (Helios)
- Tomcat 6.0.28 (needs to run also on Weblogic)
- IE 7.0.5730.13
- Firefox: 3.6.12
This isn't going to work. Your <h:outputText>
renders a HTML <span>
element because you specified the id
and style
attributes on it. If you checked the generated HTML code, it should look like this
<td class="occupieddata"><span id="slotdata" style="font-size: 12pt">Occupied</span></td>
Now, you could just add another style class to this as follows:
<h:outputText id="slotdata" value="#{userDtls.occupiedFlag}"
style="font-size: 12pt" styleClass="#{userDtls.occupiedFlag}" />
so that it ends up like:
<td class="occupieddata"><span id="slotdata" style="font-size: 12pt" class="Occupied">Occupied</span></td>
You could then style it red as follows:
table.overalltable .occupieddata .Occupied {
background : Red;
}
By the way, consider moving all that style="font-size:12pt
out the markup into the stylesheet, there where it belongs.
精彩评论