displaytagの行番号[TR]及び列ID [TD]を設定する方法？

Question

私は、DataGridを表示するDisplaytagを使用しています。今、私はいくつかの計算に基づいて行の色を変更する必要があります。好きなら

COLUMN3の値+ column4> coulmn5その行の色は黄色であるべきである

COLUMN3の値+ column4

COLUMN3 + 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上のクラスを設定することになります。そして、あなたは右のクラス名と1を探している細胞を反復処理したいです。あなたが好きならの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の特殊文字を含めることはできませんように、数字のために[OK]を動作します。任意のテキストのためには、抽出・テキスト・コンテンツの機能が必要になります。

rows / cellsを使用するgetElementsByTagNameすることが好ましいです。それは、迅速だ読みやすいとあなたはネストした表を心配する必要はありません。