CSS 및 jQuery를 사용하여 HTML 테이블에서 대체 행 색상을 어떻게 만들 수 있습니까?

CSS를 사용하여 대체 테이블 행 색상 만들기

CSS를 사용하여 테이블 행의 배경색을 동적으로 대체하려면 CSS 속성을 조작하면 됩니다. 테이블 및 행 요소.

n번째 하위 요소 사용 선택기:

CSS n번째 하위 선택기를 사용하여 홀수 또는 짝수 행을 타겟팅할 수 있습니다. 예:

tbody tr:nth-child(odd) {
  background-color: #4C8BF5;
  color: #fff;
}

이 규칙은 테이블 본문의 모든 홀수 행 스타일을 파란색 배경과 흰색 텍스트로 지정합니다.

jQuery 사용:

또는 JavaScript를 사용하여 동적으로 행을 식별하고 스타일을 지정할 수 있습니다. jQuery 사용:

$(document).ready(function() {
  $("tr:odd").css({
    "background-color": "#000",
    "color": "#fff"
  });
});

이 코드는 모든 홀수 행을 선택하고 배경색을 검정색으로, 텍스트 색상을 흰색으로 설정합니다.

테이블 요소에 스타일 적용:

테이블 전체에 색상교체 효과를 적용하고 싶다면 다음을 사용하세요. 접근 방식:

<table class="alternate_color">
  ...
</table>

.alternate_color tr:nth-child(odd) {
  background-color: #f5f5f5;
}

이 경우 테이블에 클래스를 추가하면 CSS 규칙은 해당 테이블 내의 모든 홀수 행을 대상으로 합니다.

참고: 사용 행 색상을 대체하는 테이블 요소의 클래스는 테이블에 적용되는 기존 스타일 규칙을 방해할 수 있으므로 일반적으로 tr에서 직접 n번째 하위 선택기를 사용하는 것이 좋습니다. 요소.

위 내용은 CSS 및 jQuery를 사용하여 HTML 테이블에서 대체 행 색상을 어떻게 만들 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!