Wie die Zeile id [TR] und Spalte id [TD] in displaytag setzen?
-
18-09-2019 - |
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 derzeit i den folgenden Code verwenden, die ich ändern mag. Iterate die Zeilen Objekt getElementsByTagName()[index]
betrachten, Grund später auf der Reihenfolge der Spalten sein könnte sich ändern var rows = tbody.getElementsByTagName("tr");
var tdObj = rows[i].getElementsByTagName("td")[3]
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.