Domanda

Sto usando Displaytag per visualizzare il DataGrid.Ora, devo cambiare il colore delle righe in base a qualche calcolo.Come se

il valore di colonna3 + column4 > coulmn5 quindi la riga colore deve essere giallo

valore di colonna3 + column4 < coulmn5 quindi la riga colore deve essere rosso

valore di colonna3 + column4 = coulmn5 quindi la riga colore deve essere bianco

Credo che l'unico modo per farlo è utilizzando getElementByID() metodo

Nota:non voglio prendere in considerazione la soluzione utilizzando getElementsByTagName()[index] la ragione poi sulla colonna di ordinamento potrebbe cambiare.

attualmente sto usando il seguente codice, che voglio cambiare.

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

A scorrere le righe di Oggetto

var tdObj = rows[i].getElementsByTagName("td")[3]  
È stato utile?

Soluzione

Primo, non credo che è possibile impostare l'id di td e tr in displaytag senza modificare il sorgente.Questo non ha lasciato la mia lista di cose da fare, ma per ora ho un lavoro per te.

Invece di definire la tabella:

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

fare questo:

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

Nota span avvolgendo i dati stampati.Ora è possibile selezionare i dati relativi stampa all'interno della tabella, che è probabilmente ciò che si desidera;per selezionare il tuo dati, a differenza selezione specifica del td e tr.

Altri suggerimenti

Un id, sarebbe un modo per farlo.Un altro potrebbe essere l'impostazione di una classe ogni td (in modo da poter utilizzare la stessa classe su ogni riga).Poi devi scorrere le celle alla ricerca di quello con il diritto className.È possibile abstract questo in un getElementsByClassName funzione, se volete.

Un modo per farlo con meno di markup sarebbe quello di mantenere una colonna di indice di ricerca e l'uso che per ottenere il numero di colonna, invece di iterare su celle di ogni riga.Si potrebbe ottenere queste informazioni da classi di intestazione, o col elementi.es.:

<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 l'utilizzo di innerHTML per ottenere il contenuto del testo è un po ' cattivo, ma funziona bene per i numeri, che non possono contenere caratteri speciali HTML.Per il testo arbitrario hai bisogno di un estratto del testo contenuto in funzione.

Utilizzando rows/cells è preferibile getElementsByTagName.È più veloce, più facile da leggere e non è necessario preoccuparsi di tabelle nidificate.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top