CSS와 JavaScript를 사용하여 HTML 테이블에 얼룩말 줄무늬를 만드는 방법은 무엇입니까?

CSS와 JavaScript를 사용하여 대체 테이블 행 색상을 적용하는 방법

HTML에서 클래스를 사용하여 다음과 같이 대체 행 색상을 적용할 수 있습니다. 당신은 시연했습니다. 그러나 각 개별 행이 아닌 테이블 컨테이너 자체에 스타일을 적용하려고 합니다. CSS 선택기는 이를 달성하는 방법을 제공합니다.

테이블 행에 얼룩말 줄무늬가 있도록 하려면 :nth-child(odd) 의사 클래스를 사용할 수 있습니다. 이 선택기는 테이블 본문() 내의 모든 홀수 행을 대상으로 합니다. 그런 다음 이러한 홀수 행에 다른 배경색 및 텍스트 색상과 같은 스타일을 적용할 수 있습니다.

jQuery 사용

JavaScript 사용을 선호하는 경우 다음을 사용할 수 있습니다. jQuery 라이브러리. jQuery를 사용하면 테이블에서 홀수 행을 모두 선택하고 css() 함수를 사용하여 원하는 스타일을 적용할 수 있습니다.

예 HTML:

<table border="1">
  <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:

tbody td {
  padding: 30px;
}

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

jQuery:

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

이것으로 방법을 사용하면 CSS를 사용하여 테이블 행의 대체 색상을 쉽게 생성하여 시각적으로 매력적인 프레젠테이션을 보장할 수 있습니다. 데이터.

위 내용은 CSS와 JavaScript를 사용하여 HTML 테이블에 얼룩말 줄무늬를 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!