JSF/CSS属性选择器

我有一个两列的表。我想在使用CSS包含特定值时以不同方式设置第二列的值。JSF/CSS属性选择器

这里的观点：

<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（太阳神）
的Tomcat 6.0.28（需要运行还Weblogic上）
IE 7.0.5730.13
火狐：3.6.12

来源

2011-08-11 John K

这不起作用。由于您指定了id和style属性，因此您的<h:outputText>呈现HTML <span>元素。如果选中生成的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从标记中移出到它所属的样式表中。

来源

2011-08-11 21:06:03 BalusC

可能有一些CSS hackery需要_span_来填充单元格（我试着在_td_元素上添加'display：table'到_span_并设置'padding：0px;'）。可能无法在所有浏览器上运行。 – McDowell

我认为你的意思是'styleClass =“＃{userDtls.occupiedFlag？'Occupied'：''}”'在_outputText_上。 – McDowell

@McDowell：关于填充，你是对的。只需在'td'上加'padding：0'并在span上加上'display：block'即可。至于'styleClass'，不，我认为它不会返回一个'boolean'，尽管在属性名称中有“Flag”。它也被用作输出文本值。 – BalusC

JSF/CSS属性选择器

回答

相关问题