Cómo establecer la fila Identificación del [TR] y la columna ID [TD] en displaytag?

Question

Estoy utilizando displaytag para mostrar la cuadrícula de datos. Ahora, tengo que cambiar el color de filas sobre la base de algún cálculo. Al igual que si

el valor de column3 + columna4> coulmn5 entonces el color fila debe ser de color amarillo

valor de column3 + columna4

valor de column3 + columna4 = coulmn5 entonces el color de fila debe ser blanco

Creo que la única manera de hacer esto es mediante el uso de GetElementByID () Método

Nota: . No quiero considerar la solución usando getElementsByTagName()[index], la razón de ser después de la ordenación podría cambiar la columna

En la actualidad estoy usando el siguiente código, que quiero cambiar.

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

iterar las filas de objetos

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

Answer 1

En primer lugar, no creo que es posible establecer los identificadores en el TD del o de tr en displaytag sin modificar la fuente. Esto no ha salido de mi lista de cosas por hacer, pero por ahora no tengo un trabajo alrededor para usted.

En lugar de definir la tabla:

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

hacer esto:

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

Tenga en cuenta el lapso de envolver los datos impresos. Ahora puede seleccionar los datos relativos impresión dentro de la mesa, que es probablemente lo que quiere; para seleccionar los datos, en lugar de seleccionar específicamente y de la td tr.

Answer 2

Un ID sería una manera de hacerlo. Otra consistiría en crear una clase en cada td (para que pueda volver a utilizar la misma clase en cada fila). Entonces será iterar sobre las células que buscan el uno con el className derecha. Puede el extracto esta distancia en una función getElementsByClassName si lo desea.

Una manera de hacerlo con menos margen de beneficio sería mantener una búsqueda-columna-indexar y usarlo para obtener el número de columna en lugar de iterar sobre las células en cada fila. Se podría obtener esta información de las clases en la cabecera, o elementos col. por ejemplo:.

<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 obtener el contenido de texto es un poco travieso, pero funciona bien para los números, ya que no pueden contener caracteres especiales HTML. Para el texto arbitraria que se necesita una función de extracción de texto de contenido.

Es preferible rows Usando cells / getElementsByTagName. Es más rápido, más fácil de leer y que no tiene que preocuparse acerca de las tablas anidadas.