Datatable 속성 값에 따라 색상 변경 - 편집 역사

2025년 6월 23일 (월) 23:46에 Devcafe님의 편집

2025-06-23T23:46:56Z

← 이전 판		2025년 6월 24일 (화) 08:46 판
47번째 줄:		47번째 줄:
	* $('td:eq(2)', row): 해당 행의 세 번째 열을 선택하여 배경색을 변경		* $('td:eq(2)', row): 해당 행의 세 번째 열을 선택하여 배경색을 변경
	* 특정 열의 값만을 검사하고, 조건에 맞을 때만 스타일을 적용함.		* 특정 열의 값만을 검사하고, 조건에 맞을 때만 스타일을 적용함.

			[[category:web]]
			[[category:javascript]]
			[[category:datatable]]

2024년 10월 15일 (화) 12:15에 Devcafe님의 편집

2024-10-15T12:15:47Z

← 이전 판		2024년 10월 15일 (화) 21:15 판
6번째 줄:		6번째 줄:

	* 각 셀을 검사하여 값이 50 이상인 경우 해당 셀의 배경색을 빨간색으로 설정		* 각 셀을 검사하여 값이 50 이상인 경우 해당 셀의 배경색을 빨간색으로 설정
	<source lang=~~html~~>		<source lang=js>
	$(document).ready(function() {		$(document).ready(function() {
	$('#example').DataTable({		$('#example').DataTable({
31번째 줄:		31번째 줄:
	==== 특정 열에 대해서만 스타일 적용 ====		==== 특정 열에 대해서만 스타일 적용 ====
	* 만약 특정 열(예: 3번째 열)에 대해서만 배경색을 변경하고 싶다면		* 만약 특정 열(예: 3번째 열)에 대해서만 배경색을 변경하고 싶다면
	<source lang=~~html~~>		<source lang=js>
	$(document).ready(function() {		$(document).ready(function() {
	$('#example').DataTable({		$('#example').DataTable({

Devcafe: 새 문서: === jQuery DataTable에서 특정 셀 값이 50 이상일 때 배경색 변경 === * jQuery DataTable에서 특정 셀 값이 50 이상일 때 해당 셀의 배경색을 빨간색으로 변경하려면, createdRow 콜백 함수와 CSS 스타일을 사용하여 셀을 수정할 수 있음. ==== DataTable 초기화 시 셀 스타일 변경 예시 ==== * 각 셀을 검사하여 값이 50 이상인 경우 해당 셀의 배경색을 빨간색으로 설정 $(docu...

2024-10-15T12:03:24Z

새 문서: === jQuery DataTable에서 특정 셀 값이 50 이상일 때 배경색 변경 === * jQuery DataTable에서 특정 셀 값이 50 이상일 때 해당 셀의 배경색을 빨간색으로 변경하려면, createdRow 콜백 함수와 CSS 스타일을 사용하여 셀을 수정할 수 있음. ==== DataTable 초기화 시 셀 스타일 변경 예시 ==== * 각 셀을 검사하여 값이 50 이상인 경우 해당 셀의 배경색을 빨간색으로 설정 <source lang=html> $(docu...

새 문서

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

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

* 각 셀을 검사하여 값이 50 이상인 경우 해당 셀의 배경색을 빨간색으로 설정
<source lang=html>
$(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');
}
});
}
});
});
</source>

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

==== 특정 열에 대해서만 스타일 적용 ====
* 만약 특정 열(예: 3번째 열)에 대해서만 배경색을 변경하고 싶다면
<source lang=html>
$(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'); // 세 번째 열의 배경색 변경
}
}
});
});
</source>

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