jquery가 tr 어두운 색상을 변경합니다.

웹 디자인에서는 테이블이 일반적인 레이아웃 방법입니다. 그러나 테이블에 행이 너무 많으면 사용자가 서로 다른 행을 구별하기 어려울 수 있으며 이는 사용자 경험과 유용성에 영향을 미칩니다. 이 문제를 해결하기 위해 개발자는 여러 행을 구별하는 몇 가지 시각 효과를 추가할 수 있습니다. 이 기사에서는 사용자 경험을 향상시키기 위해 jQuery를 사용하여 테이블의 행 색상을 변경합니다.

첫 번째 단계는 HTML로 테이블을 설정하는 것입니다. 세 개의 열이 있는 간단한 테이블을 사용하여 이 프로세스를 설명하겠습니다.

<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>25</td>
      <td>男</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>30</td>
      <td>男</td>
    </tr>
    <tr>
      <td>王五</td>
      <td>22</td>
      <td>女</td>
    </tr>
    <tr>
      <td>赵六</td>
      <td>28</td>
      <td>女</td>
    </tr>
  </tbody>
</table>

다음은 CSS 부분입니다. 표의 스타일과 행의 색상을 설정하겠습니다.

table {
  border-collapse: collapse;
  width: 100%;
}

th,
td {
  padding: 8px;
  text-align: left;
}

tr {
  border-bottom: 1px solid #ddd;
}

tr.even {
  background-color: #f2f2f2;
}

여기서는 셀 내부 패딩 및 테두리를 포함하여 표의 기본 스타일을 설정합니다. 또한 행마다 색상을 회색으로 변경하는 행 스타일을 설정했습니다.

이제 jQuery를 사용하여 테이블의 각 행에 스타일을 추가하겠습니다. 변수를 사용하여 현재 행의 패리티를 추적한 다음 짝수 행에 클래스 이름 "even"을 추가합니다.

$(document).ready(function() {
  $('table tbody tr:even').addClass('even');
});

이 기능은 먼저 문서가 로드되었고 작동 준비가 되었는지 여부를 감지합니다. 그런 다음 jQuery 선택기를 사용하여 테이블에 있는 각 tbody 태그의 tr 하위 태그를 선택하고 짝수 행을 필터링한 다음 각 짝수 행에 클래스 이름 "even"을 추가합니다. 이렇게 하면 테이블의 짝수 행이 더 읽기 쉽게 배경색이 변경됩니다.

이 예제를 통해 jQuery와 CSS를 사용하여 테이블 스타일을 변경하는 방법을 확인할 수 있습니다. 이는 웹 디자인의 시각적 효과를 증가시킬 뿐만 아니라 사용자 경험을 향상시키고 웹 사이트 사용을 더 쉽게 만듭니다.

위 내용은 jquery가 tr 어두운 색상을 변경합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!