Comment définir l'ID de ligne [TR] et id colonne [TD] dans displaytag?

Question

J'utilise displaytag pour afficher le DataGrid. Maintenant, je dois changer la couleur des lignes en fonction des calculs. Comme si

la valeur de colonne3 + column4> coulmn5 alors la couleur de la ligne doit être jaune

valeur de column3 + column4

valeur de column3 + column4 = coulmn5 alors la couleur de la ligne doit être blanc

Je pense que la seule façon de le faire est d'utiliser getElementByID () méthode

Remarque :. Je ne veux pas envisager la solution en utilisant getElementsByTagName()[index], raison pour être plus tard l'ordre des colonnes peut changer

à l'heure actuelle je suis en utilisant le code suivant, que je veux changer.

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

itérer les lignes d'objet

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

Answer 1

D'abord, je ne crois pas qu'il soit possible de régler les ids sur les années de td ou tr dans displaytag sans modifier la source. Cela n'a pas quitté ma liste de choses à faire, mais pour l'instant j'ai un travail autour pour vous.

Au lieu de définir votre table:

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

faire ceci:

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

Remarque la durée enveloppant les données imprimées. Maintenant, vous pouvez sélectionner les données d'impression relatives à l'intérieur de votre table, ce qui est probablement ce que vous voulez; pour sélectionner vos données, plutôt que de choisir spécifiquement le td et les années tr.

Answer 2

Un id serait une façon de le faire. Une autre consisterait à créer une classe sur chaque td (vous pouvez réutiliser la même classe sur chaque ligne). Ensuite, vous auriez itérer sur les cellules à la recherche de celui qui a le droit className. Vous pouvez abstrait cette distance en fonction de getElementsByClassName si vous le souhaitez.

Une façon de le faire avec moins de balisage serait de garder une recherche de colonne à l'index et l'utiliser pour obtenir le numéro de colonne au lieu de itérer sur les cellules sur chaque ligne. Vous pouvez obtenir ces informations auprès des cours sur l'en-tête, ou des éléments de col. par exemple:.

<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 à l'aide innerHTML pour obtenir le contenu du texte est un peu méchant, mais il fonctionne bien pour les nombres comme ils ne peuvent pas contenir des caractères spéciaux HTML. Le texte arbitraire dont vous auriez besoin d'une fonction extrait du texte contenu.

Utilisation rows / cells est préférable de getElementsByTagName. Il est plus rapide, plus facile à lire et à vous n'avez pas à vous soucier de tables imbriquées.