我有一个包含两列的表格。当第二列的值包含特定值时,我想使用 CSS 为它设置不同的样式。
这是 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>
css文件是:
table {
background : Blue ;
}
table.overalltable th {
background : Yellow;
}
table.overalltable tr {
background : White;
}
table.overalltable .keydata {
background : Orange;
}
table.overalltable .occupieddata {
background : YellowGreen;
}
目前 .occupieddata
是 YellowGreen
。当值为“已占用”时,我希望它是 Red
。类似于以下内容:
table.overalltable .occupieddata[occupiedFlag='Occupied'] {
background : Red;
}
或者像这样:
table.overalltable .occupieddata[slotdata='Occupied'] {
background : Red;
}
我怎样才能做到这一点?我正在使用以下技术:
- Java 1.6.0_22-b03
- JSF 1.2
- JSTL 1.2
- Eclipse 3.6.0 (Helios)
- Tomcat 6.0.28(也需要在 Weblogic 上运行)
- IE 7.0.5730.13
- 火狐:3.6.12
最佳答案
这行不通。你的<h:outputText>
呈现 HTML <span>
元素,因为您指定了 id
和 style
其上的属性。如果你检查生成的 HTML 代码,它应该是这样的
<td class="occupieddata"><span id="slotdata" style="font-size: 12pt">Occupied</span></td>
现在,您可以按如下方式向其添加另一个样式类:
<h:outputText id="slotdata" value="#{userDtls.occupiedFlag}"
style="font-size: 12pt" styleClass="#{userDtls.occupiedFlag}" />
所以它最终是这样的:
<td class="occupieddata"><span id="slotdata" style="font-size: 12pt" class="Occupied">Occupied</span></td>
然后您可以将其设置为红色,如下所示:
table.overalltable .occupieddata .Occupied {
background : Red;
}
顺便说一下,考虑移动所有 style="font-size:12pt
将标记输出到样式表中,在它所属的位置。
关于css - JSF/CSS 属性选择器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7032418/