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

Question

I am using Displaytag to display a DataGrid. Now I have to change the color of the lines based on some calculations. For example, if

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

column value 3 + column4 <coulmn5, then the color of the row should be red.

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

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

Note : I do not want to consider the solution using getElementsByTagName()[index], the reason may be later in the ordering of the columns.

I am currently using the following code that I want to change.

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

Iterate Object Lines

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

Answer 1

-, , td tr displaytag . , .

:

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

:

<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>

, . , , , , ; , td tr.

Answer 2

. td ( ). , , . getElementsByClassName, .

, . col. :.

<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>

innerHTML , , HTML. extract-text-content.

rows/cells getElementsByTagName. , , .