단 한줄로 게시판 줄무늬 디자인 처리 (jQuery)

게시판 중 위와같이 한줄 건너 배경색이 있는 디자인을 표현할 때가 있습니다.
jQuery를 사용하는 환경이라면 단 한줄로 처리가 가능합니다.
(쉬운거니깐 DOM으로 접근하는 방법은 생략)

$(“.board tbody tr:odd td”).css(“background”,”#fafafa”);

board 라는 클래스네임을 가진 테이블의 tbody 에서
짝수번째 tr 의 td 배경색을 #fafafa 로 지정하는 코드입니다.
tr:odd 는 홀수지만 tr객체배열은 0부터 시작하므로
실제보기에는 짝수로 조작되며 반대로 tr:even 을 적용할 수도 있습니다.

같은 원리로 하나씩 건너뛰어 형태가 다른 디자인의 경우 응용하여 적용가능.

댓글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다

This site uses Akismet to reduce spam. Learn how your comment data is processed.