如何设置行ID [TR]和列ID [TD]在displaytag？

Question

我使用Displaytag显示数据网格。现在，我不得不改变基于某些计算行的颜色。一样，如果

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

栏3的值+ column4

栏3 + column4 = coulmn5的值时，则行颜色应该是白色

我想这样做的唯一方法是通过使用的getElementById（）方法

注意：我不想使用getElementsByTagName()[index]，以后原因是对列顺序可能会改变，以考虑解决方案

目前我用下面的代码，其中我想改变。

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

迭代的行对象

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

Answer 1

首先，我不相信它是能够设定对TD的或TR在displaytag的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的。

Answer 2

一个ID将是做到这一点的一种方式。另一个办法是在每td设置一个类（这样你就可以重新使用各行上同一类）。然后你会遍历寻找一个与正确的className细胞。你可以抽象送人到getElementsByClassName方法的功能，如果你喜欢。

用更少的标记来做到这一点的一种方法是保持一个列到索引查找，并用它来获得的，而不是遍历每个行单元格的列数。你可以得到的头班或col元素此信息。例如：

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

请注意使用innerHTML来获取文本内容是一个有点调皮，但它的数字，因为它们不能包含HTML特殊字符工程确定。对于任意的文本，你需要提取文本内容的功能。

使用rows / cells优选getElementsByTagName。这是更快，更易于阅读和您不必担心嵌套的表格。