Datatable 속성 값에 따라 색상 변경

jQuery DataTable에서 특정 셀 값이 50 이상일 때 배경색 변경

jQuery DataTable에서 특정 셀 값이 50 이상일 때 해당 셀의 배경색을 빨간색으로 변경하려면, createdRow 콜백 함수와 CSS 스타일을 사용하여 셀을 수정할 수 있음.

DataTable 초기화 시 셀 스타일 변경 예시

각 셀을 검사하여 값이 50 이상인 경우 해당 셀의 배경색을 빨간색으로 설정

$(document).ready(function() {
    $('#example').DataTable({
        "createdRow": function(row, data, dataIndex) {
            // data[n]는 n번째 열의 데이터를 나타냄 (0부터 시작)
            $('td', row).each(function(index) {
                var cellValue = parseFloat($(this).text());
                if (cellValue >= 50) {
                    $(this).css('background-color', 'red');
                }
            });
        }
    });
});

createdRow: DataTable이 각 행을 생성할 때 호출되는 콜백 함수.
- row는 생성된 HTML 행 요소
- data는 해당 행의 데이터
- dataIndex는 행의 인덱스
$('td', row).each(...): 각 행의 셀을 순회하면서 td 요소를 검사하고, 그 값이 50 이상이면 해당 셀의 배경색을 빨간색으로 설정.
parseFloat: 텍스트 값을 숫자로 변환하여 숫자 비교를 가능.

특정 열에 대해서만 스타일 적용

만약 특정 열(예: 3번째 열)에 대해서만 배경색을 변경하고 싶다면

$(document).ready(function() {
    $('#example').DataTable({
        "createdRow": function(row, data, dataIndex) {
            var cellValue = parseFloat(data[2]); // 세 번째 열 값 (0부터 시작하므로 인덱스 2)
            if (cellValue >= 50) {
                $('td:eq(2)', row).css('background-color', 'red'); // 세 번째 열의 배경색 변경
            }
        }
    });
});

data[2]: 세 번째 열의 값을 가져와 비교
$('td:eq(2)', row): 해당 행의 세 번째 열을 선택하여 배경색을 변경
특정 열의 값만을 검사하고, 조건에 맞을 때만 스타일을 적용함.

Comments