jQuery Table Handling

jQuery에서 HTML 테이블 다루는 예 ( jQuery Table Handling example)

테이블의 셀에 들어있는 숫자를 대상으로 jQuery를 이용하여 가로/세로 합산 출력 및 정렬기능 구현 예

jquery-2.1.1.min.js

jquery-2.1.1.js

<!DOCTYPE html>

<html>

<head>

<title>jQuery Table Handling</title>

body { text-align: center;}

table

{ display: inline-block;

text-align: center; width:400px;

border:1px dotted blue;

}

td { width: 200px; border-bottom: 1px dotted blue; }

</style>

var arrBg = new Array();

var prevIdx;

$(document).ready(function() {

//테이블 헤더의 색상과 바닥 테두리를 설정한다

$('tr:first>th').css({

'borderBottom':'3px double black',

'backgroundColor':'lightblue'

})

//마지막 행의 바닥 테두리를 설정한다

$('tr:last>td').css('border-bottom','3px double black');

//홀수 행에 속하는 td 에는 배경색상을 달리 설정한다

$('tr:odd>td').css('backgroundColor','lightgray');

//HTML5 custom attribute

var bg = $('td[data-bg]').attr('data-bg');

$('td[data-bg]').css('backgroundColor',bg);

var color = $('td[data-color]').attr('data-color');

$('td[data-color]').css('color',color);

//선택된 그룹에 다시 필터를 적용하여 특정 요소들만 최종적으로 선택한다

$('td:not([data-bg])').css('background-color','lightgray');

$('tr:has([data-bg])>td').css('backgroundColor',bg);

$('tr>td:nth-child(1)').css('backgroundColor','lightblue');

//특정 문자열을 가진 태그를 찾아서 배경색을 달리 설정한다

$('td:contains("B")').css('backgroundColor','red');

//각 컬럼의 배경색을 배열에 저장해두고 컬럼색상 복원시 사용한다

$('tr:eq(1)>td').each(function(index){

arrBg[index] = $(this).css('backgroundColor');

});

//각 컬럼의 헤드를 클릭하면 해당 컬럼 모든 셀의 배경색을 동일하게 변경한다

$('th').click(function() {

$("table tr:last[id=sum]").remove();

var currIdx = $(this).index()+1;

$('tr>td:nth-child('+currIdx+')').css('backgroundColor','yellow');

if(prevIdx!=null && prevIdx!=currIdx) {

var pidx = parseInt(prevIdx);

$('tr>td:nth-child('+prevIdx+')').css('backgroundColor',arrBg[pidx-1]);

}

prevIdx = currIdx;

//컬럼의 값을 정렬한다

sortColumn($(this).index());

//첫번째 컬럼의 헤더를 클릭한 경우

if($(this).index()==0) {

//각행의 첫번째 컬럼에 있는 숫자를 읽어서 합산한다

var sum = 0;

$("tr:not([id=sum])").each(function( index ) {

if(index>0) { //첫번째 행은 테이블 헤더이므로 건너뛴다

var val = $(this).children('td:first').text();

sum += parseInt(val);

}

});

//합산결과를 하단의 행에 출력한다

var tr = $(createTR()).css('background-color', 'lightblue');

tr.children('td:first').text('합계:'+sum);

$('table>tbody').append(tr);

}

});

//각행의 첫번째 컬럼을 클릭하면 해당 행의 모든 컬럼값을 합산하고

//행의 마지막에 컬럼을 생성하여 합산결과를 출력한다

$('tr:not([id="sum"])>td:nth-child(1)').click(function(e){

var sum = 0;

var tr = $(this).parent('tr');

tr.children('td').each(function(index){

if(index>=3) return;

if(isNaN($(this).text())) return;

sum += parseInt($(this).text());

});

tr.find('td[id=sum]').remove();

var td = $('<td id="sum"></td>').text('합계:'+sum);

td.css('backgroundColor','lightblue');

tr.append(td);

});

//alert('abc'>'ab'); //true

//alert('1' > '2'); // false

});

function createTR() {

return '<tr id="sum"><td></td><td></td><td></td></tr>';

}

var ASC = true;//디폴트 오름차순

function sortColumn(index) {

var arrTR = new Array();

var idx = 0;

$("tr:not([id=sum])").each(function( index ) {

if(index>0) { //첫번째 행은 테이블 헤더이므로 건너뛴다

//각 tr 행을 제거하면서 동시에 배열에 저장한다

arrTR[idx++] = $(this).detach();

}

});

var iv;

var jv;

for(var i=0;i<(arrTR.length-1);i++) {

for(var j=i+1;j<arrTR.length;j++) {

iv = arrTR[i].children('td:eq('+index+')').text();

jv = arrTR[j].children('td:eq('+index+')').text();

if(isNaN(iv) || isNaN(jv)) { //if not number

if(ASC) { //ASC

if(iv < jv) {

var tmp = arrTR[i];

arrTR[i] = arrTR[j];

arrTR[j] = tmp;

}

}else{ //DESC

if(iv > jv) {

var tmp = arrTR[i];

arrTR[i] = arrTR[j];

arrTR[j] = tmp;

}

else { //if number

if(ASC) { //ASC

if(parseInt(iv) < parseInt(jv)) {

var tmp = arrTR[i];

arrTR[i] = arrTR[j];

arrTR[j] = tmp;

}

}else{ //DESC

if(parseInt(iv) > parseInt(jv)) {

var tmp = arrTR[i];

arrTR[i] = arrTR[j];

arrTR[j] = tmp;

}

// Append the sorted rows to table

for(var i=0;i<arrTR.length;i++) {

$('table>tbody').append(arrTR[i]);

}

ASC = !ASC;

}

</script>

</head>

<body>

<table>

</table>

</body>

</html>

저작자표시

Programming

jQuery Table Handling

티스토리툴바