Layui 테이블의 다른 배경색을 설정하는 방법

Layui 테이블에서 Parity 행의 다른 배경색 설정은 CSS 또는 JavaScript를 통해 달성 할 수 있습니다. 1. CSS의 Nth-Child 의사 급 선택기를 사용하여 홀수 및 짝수 행의 배경색을 설정하십시오. 2. 테이블 렌더링이 JavaScript를 통해 완료된 후 클래스 이름을 동적으로 추가하여 배경색을 설정합니다. 이 접근법은 더 큰 유연성과 역 동성을 제공합니다.

소개

Layui 프레임 워크를 사용하여 프론트 엔드 프로젝트를 개발할 때 테이블 스타일을 사용자 정의하는 것이 일반적인 요구 중 하나입니다. 특히, 홀수 행의 다른 배경색을 설정하면 사용자 경험을 향상시킬뿐만 아니라 데이터를 더 명확하게 만듭니다. 오늘 우리는 Layui 테이블 에서이 효과를 달성하는 방법에 대해 논의 할 것입니다. 이 기사를 통해 Layui 및 Custom CSS의 내장 기능을 사용하여 패리티 배경색 설정을 구현하고 가능한 몇 가지 문제와 솔루션에 대해 배우는 방법을 배우게됩니다.

기본 지식 검토

시작하기 전에 Layui 양식의 기본 개념을 빠르게 검토합시다. Layui는 테이블 구성 요소 ( table )가 데이터 표시를위한 강력한 도구 인 풍부한 UI 구성 요소를 제공하는 가벼운 프론트 엔드 프레임 워크입니다. 테이블 스타일은 내장 구성 항목 및 사용자 정의 CS로 조정할 수 있습니다.

핵심 개념 또는 기능 분석

홀수 및 짝수 라인의 배경색의 정의 및 기능

홀수 및 짝수 행의 배경색은 테이블의 다른 배경색의 설정을 나타냅니다. 이 디자인은 사용자가 다양한 행을 쉽게 구별 할 수 있도록 도와줍니다. 특히 많은 양의 데이터를 처리 할 때 데이터의 가독성과 사용자의 탐색 효율성을 향상시킬 수 있습니다.

작동 방식

Layui에서는 패리티 라인 배경 색상 설정이 주로 CSS 선택기를 통해 달성됩니다. Layui 테이블의 행 요소는 layui-table-row 클래스 이름을 자동으로 추가합니다. CSS의 :nth-child 의사 급 선택기를 사용하여 각각 홀수 및 짝수 행을 선택한 다음 다른 배경색을 설정할 수 있습니다.

사용의 예

기본 사용

Layui 테이블에서 패리티 행 배경색을 설정하는 가장 쉬운 방법은 CSS 스타일 시트를 통해 수행하는 것입니다. 다음은 기본 예입니다.

 <스타일>
  .layui-table tbody tr : nth-Child (홀수) {
    배경색 : #f2f2f2; /* 홀수 라인 배경 색상*/
  }
  .layui-table tbody tr : nth-Child (짝수) {
    배경색 : #ffffff; /* 라인 배경 색상*/
  }
</스타일>

<table class = "layui-table">
  <!-테이블 내용->
</테이블>

이 코드에서는 :nth-child(odd) 및 :nth-child(even) 사용하여 각각 홀수 및 짝수 행을 선택하고 다른 배경색을 설정합니다.

고급 사용

특정 조건에서 패리티 행의 배경색을 동적으로 변경하려면 JavaScript를 사용하여 CSS 클래스 이름을 동적으로 추가하거나 수정하십시오. 예를 들어:

 // layui 테이블 var table = layui.table을 초기화했다고 가정합니다.

// 렌더 테이블 테이블 .Render ({
  Elem : '#demo'
  , url : '/demo/table/user/'
  , cols : [[[
    {필드 : 'ID', 너비 : 80, 제목 : 'ID'}}
    , {필드 : '사용자 이름', 너비 : 80, 제목 : '사용자 이름'}
    , {필드 : '섹스', 너비 : 80, 제목 : '젠더'}
    , {Field : 'City', 너비 : 80, 제목 : 'City'}}
  ]]]]
  , 완료 : 함수 (res, curr, count) {
    // 테이블 렌더링이 완료된 후에는 동적으로 패리티 행 배경 색상 $ ( '. layui-table tbody tr : 홀수'). addClass ( 'Odd-row');
    $ ( '. layui-table tbody tr : 짝수'). addClass ( 'even-row');
  }
});

// CSS 스타일 <스타일>
  .odd-row {
    배경색 : #f2f2f2;
  }
  .
    배경색 : #ffffff;
  }
</스타일>

이 방법을 사용하면 JavaScript를 통해 클래스 이름을 동적으로 추가하여 테이블 렌더링이 완료된 후 배경색을 설정하여 유연성이 향상됩니다.

일반적인 오류 및 디버깅 팁

패리티 라인의 배경색을 설정할 때 다음과 같은 문제가 발생할 수 있습니다.

1. 스타일이 효과적이지 않음 : CSS 스타일 시트가 올바르게로드되었고 선택기가 올바르지 않은지 확인하십시오. 브라우저의 개발자 도구를 사용하여 요소의 스타일이 올바르게 스타일인지 확인할 수 있습니다.

2. 동적으로 클래스 이름을 추가하면 실패 : JavaScript를 사용하여 클래스 이름을 동적으로 추가하는 경우 테이블 렌더링이 완료된 후 코드가 실행되는지 확인하십시오. Layui 테이블의 done 콜백 함수를 사용하여 올바른 시점에서 코드가 실행되도록 할 수 있습니다.

3. 배경색 오버레이 문제 : 테이블 행에 이미 다른 배경색 설정이있는 경우 Parity Row로 설정 한 배경색을 덮어 쓸 수 있습니다. 스타일을 강요하는 데 !important 하지만 이는 모범 사례가 아니며 기존 스타일을 확인하고 크기를 조정하는 것이 좋습니다.

성능 최적화 및 모범 사례

Parity 행의 배경색을 설정할 때주의를 기울여야 할 몇 가지 성능 최적화 및 모범 사례가 있습니다.

• 과도한 사용을 피하십시오 !important : 중요하지만 !important 스타일을 적용 할 수 있지만 스타일의 복잡성과 유지 보수 난이도를 높이고 선택기 우선 순위를 조정하여 스타일 커버리지 문제를 해결하려고 시도합니다.

• CSS 변수 사용 : 여러 장소에서 동일한 색상을 사용해야하는 경우 CSS 변수를 사용하여 색상을 쉽게 관리하고 수정할 수 있습니다.

 : 루트 {
  --odd-row-color : #f2f2f2;
  -Even-Row-Color : #ffffff;
}

.layui-table tbody tr : nth-Child (홀수) {
  배경색 : var (-홀수-컬러);
}
.layui-table tbody tr : nth-Child (짝수) {
  배경색 : var (-균일 한 색);
}

• 사용자 경험을 고려하십시오 : 홀수 및 배경 색상의 대비가 너무 크지 않아서 사용자의 읽기 경험에 영향을 미치지 않아야합니다. 동시에 선택된 색상은 전체 디자인 스타일을 준수해야합니다.

위의 방법과 기술을 통해 Layui 테이블에서 다양한 배경 색상의 패리티 행의 효과를 쉽게 달성하면서 코드의 유지 관리 및 성능 최적화를 유지할 수 있습니다. 이러한 공유가 실제 프로젝트에서 도움이되기를 바랍니다.

위 내용은 Layui 테이블의 다른 배경색을 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!