DisplayTag에서 행 ID [TR] 및 열 ID [TD]를 설정하는 방법은 무엇입니까?
-
18-09-2019 - |
문제
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]
해결책
첫째, 소스를 수정하지 않고 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을 특별히 선택하는 것과는 달리 데이터를 선택합니다.
다른 팁
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
. 더 빠르고 읽기 쉬우 며 중첩 테이블에 대해 걱정할 필요가 없습니다.