CSS와 jQuery를 사용하여 HTML 테이블에서 대체 행 색상을 만들려면 어떻게 해야 합니까?

CSS를 사용하여 대체 표 행 색상 만들기

표 행 색상을 대체하면 HTML 표의 시각적 매력과 유용성이 향상되어 HTML 표를 더 쉽게 만들 수 있습니다. 읽다. CSS를 사용하여 이를 달성하는 방법은 다음과 같습니다.

• 테이블 클래스 사용:

테이블에 클래스를 할당하고 스타일을 테이블에 적용할 수 있습니다. 해당 클래스 내의 테이블 행:

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

이것은 홀수의 배경색을 대체합니다.

• jQuery 사용:

jQuery를 사용하면 홀수 행을 선택하고 스타일을 지정할 수 있습니다. 동적으로:

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

• nth-child:

CSS 스타일시트 내에서 직접 nth-child 선택기를 사용하여 모든 항목을 타겟팅할 수 있습니다. 다른 행:

tbody tr:nth-child(odd) {
  background-color: #CCCCCC;
}

홀수 행만 대체 배경을 갖게 됩니다. color.

• HTML 예:

다음은 위 방법을 사용한 HTML 예입니다.

<table class="alternate_color">
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
    </tr>
    <tr>
      <td>5</td>
      <td>6</td>
      <td>7</td>
      <td>8</td>
    </tr>
    <tr>
      <td>9</td>
      <td>10</td>
      <td>11</td>
      <td>13</td>
    </tr>
  </tbody>
</table>

적절한 CSS를 사용하면 테이블에 얼룩말 줄무늬를 쉽게 만들어 가독성을 높이고 미학.

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