DisplayTag에서 행 ID [TR] 및 열 ID [TD]를 설정하는 방법은 무엇입니까?

Question

DisplayTag를 사용하여 Datagrid를 표시하고 있습니다. 이제 계산에 따라 행 색상을 변경해야합니다. if

column3 + column4> coulmn5의 값은 행 색상이 노란색이어야합니다.

column3 + column4 <coulmn5의 값은 행 색상이 빨간색이어야합니다.

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 (따라서 각 행에서 동일한 클래스를 재사용 할 수 있습니다). 그런 다음 올바른 클래스 이름을 가진 셀을 찾는 셀을 반복합니다. 원하는 경우 이것을 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. 더 빠르고 읽기 쉬우 며 중첩 테이블에 대해 걱정할 필요가 없습니다.