3

我正在使用 Displaytag 来显示 DataGrid。现在，我必须根据一些计算来更改行的颜色。就像如果

column3 + column4 > coulmn5 的值，则行颜色应为黄色

column3 + column4 < coulmn5 的值，则行颜色应为红色

column3 + column4 = coulmn5 的值，则行颜色应为白色

我认为唯一的方法是使用getElementByID()方法

注意：我不想考虑使用 的解决方案getElementsByTagName()[index]，因为稍后列排序的原因可能会改变。

目前我正在使用以下代码，我想更改它。

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

迭代行对象

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

2 回答 2

4

首先，我不相信可以在不修改源的情况下在 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。

于 2009-10-20T00:38:33.527 回答
2

id 将是一种方法。另一个是在每个上设置一个类td（这样您就可以在每一行上重复使用相同的类）。然后，您将遍历单元格以查找具有正确类名的单元格。如果您愿意，可以将其抽象为 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 特殊字符。对于任意文本，您需要一个 extract-text-content 函数。

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

于 2009-09-29T13:01:00.470 回答