0

I have a bean that knows what the temperature it is at serveral different locations. That information is displayed in a jsf h:datatable.

<h:dataTable value="#{temperatureBean.records}" var="temperatureRecord" >
  <h:column >
    <f:facet name="header">Location</f:facet>
    #{temperatureRecord.location}
  </h:column>        
  <h:column>
    <f:facet name="header">Temperature</f:facet>
    #{temperatureRecord.temperature}
  </h:column>
</h:dataTable>

I want to give the resulting html <td> elements class values, so that cells for places where the temperature is above zero can, via css, be coloured red, whilst those where the temperature is below zero are coloured blue.

<td class="hot">10</td>

<td class="cold">-2</td>

Could anyone tell me the technique for conditionally generating html <td> attributes?

This question is somewhat similar to a previous answer by BalusC: Dynamically change CSS style of cell in <h:dataTable> column However, in that case, the given solution results in a <span> being generated inside the table cell and it's the class of the span that is programmatically controlled, not any attribute of the <td> element as I'm looking for. The reason that matters is that although I can both give the span a background colour, and tell it to fill the entire width of the table cell, I can't get it to expand to the cell's height.

This fiddle shows the effect of the css given in that previous answer. I've deliberately put something large in the first table cell.

https://jsfiddle.net/twistedlizard/zvLafpsk/

Mojarra: 2.2.0

Community
  • 1
  • 1
twisted
  • 742
  • 2
  • 11
  • 19
  • 1
    You can take a look at [dynamically change cell values ​​and css style of – tfosra Jun 04 '16 at 15:48
  • Thanks tfosra. Following that previous answer results in a inside the and even with the css given there, the span doesn't fully expand to fill the cell vertically, only doing so horizontally. – twisted Jun 04 '16 at 19:52
  • If you want it to fill your td vertically, you will just have to customize your css – tfosra Jun 04 '16 at 20:00
  • 1
    Indeed, e.g. make it an inline-block element with height of 100%. This is just basic CSS. In JSF perspective it only boils down that you have to wrap the cell's content in another element. In ``, you cannot easily set a style class on individual table cells on a per-row basis. – BalusC Jun 06 '16 at 07:53
  • "e.g. make it an inline-block element with height of 100%." Thanks BalusC, but that doesn't make the the span fill the table cell: https://jsfiddle.net/twistedlizard/zvLafpsk/4/ – twisted Jun 06 '16 at 08:44

0 Answers0