Como definir o ID da linha [Tr] e o ID da coluna [TD] no DisplayTag?

Question

Estou usando o DisplayTag para exibir o datagrid. Agora, tenho que alterar a cor das linhas com base em algum cálculo. Como se

O valor da coluna 3 + coluna> coulmn5, então a cor da linha deve ser amarela

Valor da coluna 3 + coluna 4 <coulmn5 Então a cor da linha deve ser vermelha

Valor da coluna 3 + coluna4 = coulmn5 Então a cor da linha deve ser branca

Eu acho que a única maneira de fazer isso é usando getElementById () método

Observação: Não quero considerar a solução usando getElementsByTagName()[index] , razão posteriormente na ordem da coluna pode mudar.

No momento, estou usando o seguinte código, que quero mudar.

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

Itera o objeto das linhas

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

Answer 1

Primeiro, não acredito que seja possível definir os IDs nos TDs ou TR's em DisplayTag sem modificar a fonte. Isso não deixou minha lista de coisas para fazer, mas, por enquanto, eu tenho uma solução para você.

Em vez de definir sua mesa:

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

fazem isto:

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

Observe o span que envolve os dados impressos. Agora você pode selecionar os dados relacionados à impressão dentro da sua tabela, o que é provavelmente o que você deseja; Para selecionar seus dados, em vez de selecionar especificamente os TDs e TR's.

Answer 2

Um ID seria uma maneira de fazer isso. Outro estaria definindo uma classe em cada td (para que você possa reutilizar a mesma classe em cada linha). Então você itera sobre as células procurando uma com o nome certo. Você pode abstrair isso em uma função getselementsbyclassName, se quiser.

Uma maneira de fazê-lo com menos marcação seria manter uma pesquisa de coluna para índice e usá-la para obter o número da coluna em vez de iterar sobre as células em todas as linhas. Você pode obter essas informações das aulas no cabeçalho, ou col elementos. por exemplo.:

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

Nota usando innerHTML Para obter o conteúdo de texto, é um pouco travesso, mas funciona bem para números, pois eles não podem conter caracteres especiais HTML. Para texto arbitrário, você precisaria de uma função de contexto de texto de extração.

Usando rows/cells é preferível a getElementsByTagName. É mais rápido, mais fácil de ler e você não precisa se preocupar com mesas aninhadas.