html 표 데이터를 생성 할 때 테이블 행 색상을 대체하는 데 사용하는 방법을 듣고 싶었습니까? 제 목적을 위해 저는 백엔드에서 Java와 JSP를 사용하고 있습니다. 나는 단지 데이터를 반복 할 계획이었고 index % 2 == 0을 하나의 색으로 설정하면 else 다른 것으로 설정했습니다. 이거 괜찮아? 일종의 태그 라이브러리를 사용하면 더 좋을 것 같습니다.테이블 행 색상을 교대로?
<c:forEach var="myItem" items="${myCollection}" varStatus="loop">
<tr class="${loop.index % 2 == 0 ? 'even' : 'odd'}">
...
</tr>
</c:forEach>
서버 쪽에서도 똑같은 'display'태그를 사용하거나 클라이언트 쪽에서 jQuery를 사용하여 홀수, 짝수 셀렉터가있는 행을 선택하고 클래스를 추가하는 방법을 고려해 볼 수 있습니다.
일반적인 JSP 지침은 JSP에서 Java 코드를 인터리브하지 않고 해당 Java 코드를 캡슐화하는 태그를 사용하는 것입니다. 그래서 당신이라면 인덱스 % 2 == 0을 피할 수 있습니다.
짝수 의사 선택기를 사용하여 CSS3에서이를 수행 할 수 있습니다. W3은 example입니다.
가장 쉬운 방법은 CSS nth-child을 사용하는 것이지만, 슬프게도 IE에서는 지원되지 않습니다. 그래서 IE와 호환되는 방법이 필요하다면, 당신이하는 일은 괜찮습니다.
편집 :는 CSS-솔루션은 다음과 같이 wuld :
tbody:nth-child(2n) { /* even rows */
background-color:#eee;
}
tbody:nth-child(2n+1) { /* odd rows */
background-color:#ccc;
}
우리는 테이블 행 착색 클라이언트 측에서 자바 스크립트를 사용하는 것을 선호합니다. 이것은 심지어 서버에서 (약간의) 부담을 줄여줍니다. 그러나 큰 테이블 (> 100 행)에서는 바람직하지 않습니다.
이것은 대부분의 브라우저에서 작동하는 가장 간단한 솔루션입니다. 자세한 내용은 this answer을 참조하십시오. 당신은 IE6을 피할 수 있다면, you can use CSS pseudo-selectors 같은 효과를 얻을 수 있습니다. 또는 you can use JavaScript.
글로벌 솔루션이 필요한 경우 (즉, 여러 곳에서이 루핑을하지 않고도 모든 테이블에서 작동하는 솔루션) 필터를 사용하여 HTML을 구문 분석 할 수 있습니다. HTML을 깨끗하게 유지하는 한, 필터는 꽤 덤프 될 수 있습니다 (다음 ">"까지 버퍼에 읽은 다음 가지고있는 태그를 확인하고 누락 된 속성을 TR에 추가하고 버퍼를 플러시).
마지막으로 테이블을 일반적인 API (예 : getColumns(), getRows() 및 getCell())로 래핑하고 하나의 JSP로 모두 렌더링 할 수 있습니다.
taglib의 경우 : 사용하는 경우 사용하십시오. 그렇게하지 않으면 JSP를 피하고 순수한 자바로 그러한 테이블을 포맷하는 도우미 클래스를 작성하는 것이 더 빠를 수있다. 그렇게하면 항상 웹 서버를 다시 시작하지 않고도 단위 테스트를 작성하고 솔루션을 개발할 수 있습니다.
이미 jQuery를 사용하고 있다면 짝수 (또는 홀수) 선택기를 사용해보십시오. 심지어 the documentation page for the even selector에 테이블 행 착색 예가 있습니다. 당신이 (많은 자바와 같은 솔루션과 유사하지만 더 나은) JSTL을 사용할 수있는 경우
mootools zebra.David walsh는 훌륭한 글을 가지고 있습니다. http://davidwalsh.name/mootools-zebra-tables-plugin
'Java 코드를 캡슐화하는 태그'를 사용하면 표의 데이터를 색상으로 변경하여 인쇄 할 수있는 사용자 정의 JSTL 태그를 작성하는 것과 같은 것을 할 수 있습니까? – aeq
@aeq - 예, 정확하게. – justkt