2009-09-29 33 views
3

我正在使用Displaytag来显示DataGrid。现在,我必须根据一些计算来改变行的颜色。像如果如何在displaytag中设置行ID [TR]和列ID [TD]?

栏3 + column4> coulmn5的值时,则行颜色应该是黄色栏3的

值+ column4 < coulmn5则行颜色应该是栏3 + column4 = coulmn5的红色

值那么该行的颜色应该是白色

我认为要做到这一点的唯一方法是通过使用的getElementById()方法

注意:我不想考虑使用getElementsByTagName()[index]的解决方案,理由是后面的列排序可能会改变。

目前我使用下面的代码,我想改变。

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

迭代行对象

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

回答

3

首先,我不相信可以在displaytag中设置td或tr的id,而无需修改源代码。这并没有让我的事情做的清单,但现在我有你的工作。

而是定义你的表:

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

做到这一点:

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

注意跨度包装印刷数据。现在您可以选择与您的表格内的打印有关的数据,这可能是您想要的;选择你的数据,而不是专门选择td和tr。

2

一个ID会做到这一点的方法之一。另一个将在每个td上设置一个班级(这样您就可以在每一行重新使用同一班级)。然后,您将遍历所有正在寻找具有正确className的单元格。如果你喜欢,你可以把它抽象成一个getElementsByClassName函数。

一种少用标记的方法是保持列到索引的查找并使用它来获取列号,而不是遍历每行的单元格。您可以从标题上的类或col元素中获取此信息。例如:使用innerHTML来获取文本内容

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

注是有点调皮,但它的数字,因为它们不能包含HTML特殊字符工程确定。对于任意文本,您需要提取文本内容功能。

使用rows/cells优于getElementsByTagName。它更快,更易于阅读,而且您不必担心嵌套表格。