Question

I am using Displaytag to display the DataGrid. Now, I have to change the color of rows based on some calculation. Like if

the value of column3 + column4 > coulmn5 then the row color should be yellow

value of column3 + column4 < coulmn5 then the row color should be red

value of column3 + column4 = coulmn5 then the row color should be white

I think the only way to do this is by using getElementByID() method

Note: i don’t want to consider the solution using getElementsByTagName()[index] , reason being later on the column ordering might change.

at present i am using the following code, which i want to change.

var rows = tbody.getElementsByTagName("tr");

Iterate the rows Object

var tdObj = rows[i].getElementsByTagName("td")[3]  

Answer 1

First, I do not believe it is possible to set the ids on the td’s or tr’s in displaytag without modifying the source. This has not left my list of things to do, but for now I have a work around for you.

Instead of defining your table:

<display:table id='row' name="..." export="true" requestURI="">
  <display:column property="usefulData" title="Useful data" sortable="true" />
  ... more columns ...
</display:table>

do this:

<display:table id='row' name="..." export="true" requestURI="">
  <display:column title="Useful data" sortable="true" >
    <span id='${row.usefulData}' class='css_class_selector'>${row.usefulData}</span>
  </display:column>
</display:table>

Note the span wrapping the printed data. Now you can select the data relating printing inside your table, which is probably what you want; to select your data, as opposed to specifically selecting the td’s and tr’s.