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

Question

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

3 열 + column4> coulmn5 값이라면 로우 색상은 3 열 중

값 + column4 < coulmn5 다음 로우 색상 3 열 + column4 = coulmn5 빨간색

값이어야 황색되어야 다음 행의 색상은 에서 getElementById() 방법을 사용하여

내가이 작업을 수행 할 수있는 유일한 방법이라고 생각 흰색이어야한다

참고 : 나중에 getElementsByTagName()[index]을 사용하여 솔루션을 고려하지 않으려는 경우 나중에 열 순서가 변경 될 수 있습니다.

현재 내가 변경하고자하는 다음 코드를 사용하고 있습니다.

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

으로 반복 행이 그것을 할 수있는 하나 개의 방법이 될 것입니다

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

Answer 1

먼저 소스를 수정하지 않고 displaytag에있는 ID를 td 또는 tr에 설정할 수 있다고 생각하지 않습니다. 이것은 할 일 목록을 남겨 두지 않았지만, 지금은 당신을 위해 해결해야 할 일이 있습니다. 대신 테이블을 정의

:

<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 요소에서이 정보를 얻을 수 있습니다. 예를 들어 : 텍스트 내용을 얻을 수 innerHTML를 사용하여

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

주 조금 장난 꾸러기이지만, 그들은 HTML 특수 문자를 포함 할 수 없습니다로 숫자에 대한 확인을 작동합니다. 임의의 텍스트의 경우 추출 텍스트 컨텐츠 기능이 필요합니다.

rows/cells을 사용하는 것이 getElementsByTagName보다 바람직합니다. 더 빠르고 읽기 쉽고 중첩 테이블에 대해 걱정할 필요가 없습니다.