How to set the row id [ TR ] and column id [ TD] in displaytag?

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

An id would be one way to do it. Another would be setting a class on each td (so you can re-use the same class on each row). Then you'd iterate over the cells looking for the one with the right className. You can abstract this away into a getElementsByClassName function if you like.

A way to do it with less markup would be to keep a column-to-index lookup and use that to get the column number instead of iterating over cells on every row. You could get this information from classes on the header, or col elements. eg.:

<script type="text/javascript">
    function check(table) {
        // Work out which column is at which index
        //
        var columns= {};
        var ths= table.tHead.rows[0].cells;
        for (var i= ths.length; i-->0;)
            if (ths[i].className.indexOf('column-')==0)
                columns[ths[i].className.substring(7)]= i;

        // Check each row
        //
        var rows= table.tBodies[0].rows;
        for (var i= rows.length; i-->0;) {
            var cells= rows[i].cells;
            var a= +cells[columns.a].innerHTML;
            var b= +cells[columns.b].innerHTML;
            var sum= +cells[columns.sum].innerHTML;
            var right= a+b==sum;
            rows[i].className= right? 'right' : 'wrong';
        }
    }
</script>

<style>
    .right { background: green; }
    .wrong { background: red; }
</style>

<table id="t">
    <thead>
        <tr>
            <th class="column-a">A</th>
            <th class="column-b">B</th>
            <th class="column-sum">Sum</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>4</td>
            <td>5</td>
            <td>6</td>
        </tr>
    </tbody>
</table>

<button onclick="check(document.getElementById('t'));">Check</button>

Note using innerHTML to get the text content is a bit naughty, but it works OK for numbers as they cannot contain HTML special characters. For arbitrary text you would need an extract-text-content function.

Using rows/cells is preferable to getElementsByTagName. It's quicker, easier-to-read and you don't have to worry about nested tables.

Answer 2

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.