Frage

Ich verwende Displaytag das Datagrid angezeigt werden soll. Nun muss ich die Farbe der Zeilen auf einige Berechnung auf der Grundlage ändern. Wie, wenn

der Wert von column3 + Column4> coulmn5 dann sollte die Zeilenfarbe gelb

Wert von column3 + Column4

Wert von column3 + Column4 = coulmn5 dann sollte die Zeilenfarbe weiß sein

Ich denke, der einzige Weg, dies zu tun ist durch die Verwendung von getElementByID () Methode

Hinweis . Ich will nicht die Lösung mit getElementsByTagName()[index] betrachten, Grund später auf der Reihenfolge der Spalten sein könnte sich ändern

derzeit i den folgenden Code verwenden, die ich ändern mag.

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

Iterate die Zeilen Objekt

var tdObj = rows[i].getElementsByTagName("td")[3]  
War es hilfreich?

Lösung

Erstens, ich glaube es nicht möglich ist, die IDs auf dem TDs oder tr des in displaytag zu setzen, ohne die Quelle zu ändern. Das hat meine Liste der Dinge nicht mehr zu tun, aber jetzt habe ich eine Arbeit um für Sie.

Statt der Definition Ihrer Tabelle:

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

Sie folgendermaßen vor:

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

Beachten Sie die Spanne der gedruckten Daten Verpackung. Jetzt können Sie die Daten auswählen in Ihrer Tabelle beziehen Druck, was wahrscheinlich ist, was Sie wollen; im Gegensatz Ihre Daten auswählen, um speziell der und tr des td auswählen.

Andere Tipps

Ein id wäre eine Möglichkeit, es zu tun. Eine andere Möglichkeit wäre eine Klasse auf jeder td werden Einstellung (so können Sie die gleiche Klasse in jeder Zeile wiederverwenden). Dann würden Sie die Zellen durchlaufen für den einen mit dem rechten Klassennamen suchen. Sie können in eine getElementsByClassName Funktion abstrakt diese weg, wenn Sie möchten.

Eine Möglichkeit, es mit weniger Markup zu tun wäre, eine Spalte-zu-Indexsuche zu halten zu sein und verwenden Sie die Spaltennummer statt iterieren Zellen auf jeder Zeile zu erhalten. Sie können diese Informationen von Klassen auf dem Header oder col Elemente erhalten. zB:.

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

Hinweis innerHTML den Textinhalt erhalten mit einem bisschen frech, aber es funktioniert OK für Zahlen, wie sie keine HTML-Sonderzeichen enthalten. Für beliebigen Text würden Sie eine Auszug-Text-Content-Funktion benötigen.

Mit rows / cells vorzuziehen getElementsByTagName. Es ist schneller, leichter zu lesen und Sie müssen nicht zu geschachtelten Tabellen sorgen.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top