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はそれを行う1つの方法です。もう1つは、それぞれにクラスを設定する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の特殊文字を含めることができないため、数値に対しては問題なく機能します。任意のテキストの場合、extract-text-content関数が必要になります。

rows/を使用cellsすることをお勧めしgetElementsByTagNameます。より速く、読みやすく、ネストされたテーブルについて心配する必要はありません。

于 2009-09-29T13:01:00.470 に答える