JSP를 사용하여 HTML 테이블 행 색상을 교대하는 방법은 무엇입니까?

StackOverflow https://stackoverflow.com/questions/241897

  •  04-07-2019
  •  | 
  •  

문제

JSP를 사용하여 HTML 테이블 행 색상을 어떻게 번갈아가나요?

내 CSS는 다음과 같습니다.

tr.odd {background-color: #EEDDEE}
tr.even {background-color: #EEEEDD}

사용하고 싶습니다 <c:forEach> 컬렉션을 반복합니다. 

<c:forEach items="${element}" var="myCollection">
  <tr>
    <td><c:out value="${element.field}"/></td>
    ...
  </tr>
</c:forEach>

행을 추적하려면 int count 변수 또는 부울 홀수/짝수 변수가 필요합니다. 그럼 내 <tr> 태그는 다음과 같습니다.

<tr class="odd or even depending on the row">
도움이 되었습니까?

해결책

사용 varStatus 당신의 속성 forEach 태그와 JSTL은 a의 인스턴스를 관리합니다 javax.servlet.jsp.jstl.core.LoopTagStatus 당신이 지정하는 변수 이름으로 당신을 위해.

그런 다음 3 원 운영자를 사용하여 적절한 클래스 이름을 쉽게 출력 할 수 있습니다.

<c:forEach items="${element}" var="myCollection" varStatus="loopStatus">
  <tr class="${loopStatus.index % 2 == 0 ? 'even' : 'odd'}">
    ...
  </tr>
</c:forEach>

이것 JSTL 프라이머 IBM에서는 다음에 대한 자세한 정보가 있습니다 core 태그 라이브러리와 그것이 당신에게 제공하는 것.

다른 팁

클라이언트 측에서이를 기꺼이 수행하려는 경우 jQuery로 얼룩말 스트라이핑을 수행 할 수 있습니다.

몇 줄의 코드로 만 수행되지만 파일에 jQuery 라이브러리를 포함시켜야합니다.

http://docs.jquery.com/tutorials : zebra_striping_made_easy

http://docs.jquery.com/selectors/odd

http://docs.jquery.com/selectors/even

(이 답변은 CSS 측면에만 관련이 있습니다 ...)

물론, 나는 항상 어린이 TD를 대상으로합니다.

tr.odd td {}
tr.even td {}

그 이유는 IE가 실제로 TR의 값을 제거하고 해당 TR 내의 각 개별 TD에 적용하여 실제로 TR 배경색을 적용하기 때문입니다. 때로는 TR 배경색을 수행하는 IE의 이상한 방법을 무시하는 CSS 재설정 또는 기타 CSS 규칙이있을 수 있으므로이를 피할 수있는 방법입니다.

또한 설정 만 고려할 수도 있습니다

tr td {background-color: #EEDDEE}

그리고

tr.odd td {background-color: #EEEEDD}

따라서 코드는 약간 덜 장점입니다

이것을 좋아하고 작동 할 것입니다.

table tr:nth-child(odd) { background-color: #ccc; }

나는 JSP를 사용하지 않으므로 당신에게 당신의 언어로 답을 줄 수는 없지만 여기에 내가하는 일이 있습니다 (의사 코드 사용).

counter = 0
foreach (elements)
    counter = counter + 1
    output: <tr class="row{counter % 2}">...</tr>

개인적으로, 나는 "row0"및 "row1"클래스의 이름을 지정합니다.이 클래스는 간단한 모듈러스 계산으로 그들 사이를 번갈아 가며 트리플 또는 쿼드로 번갈아 가기로 결정하면 쉽게 확장 할 수 있습니다. 에게 row2, row3 출력 코드를 변경하십시오 counter % 4, 등.

이런 경우에는 3 차 연산자를 사용했습니다. 그것은 다음과 같은 것처럼 보일 것입니다.

String oddEven="";
<c:forEach items="${element}" var="myCollection">
    oddEven = (oddEven == "even") ? "odd" : "even";
    <tr class='"'+oddEven+'"'>
        <td><c:out value="${element.field}"/></td>
        ...
    </tr>
</c:forEach>
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top