본문 바로가기
TechNical/HTML, CSS

다중 테이블셀 병합

by 강멍멍이 강멍멍이 2020. 5. 8.

jquery를 이용해서 내용이 동일한 테이블셀을 row 병합하는 함수를 만들어 보았다.

시작, 종료셀 위치를 지정해 줄 수 있다.
핸드폰으로 타이핑을 하는거라서 심히 노가다 및 오타가 남발될것 같다.
그나저나 이걸 왜하고 있지...

function fn_mergerow() {
var rows = $("listtbl>tbody").children();
var startpos = 1;
var arrsize = 7;
var prevstr = new Array(arrsize);
var prevrow = new Array(arrsize);
var prevcell = new Array(arrsize);
var targetcell = new Array(arrsize);
var tdstr = new Array(arrsize);
var spancnt = new Array(arrsize);
var row;
var removecnt = 0;

for(var z = 0 ; z < arrsize ; z++) {
spancnt[z] = 1;
}

for(var i =0; i<rows.length ; i++){
row = rows[i];

for(var a=0; a< arrsize ; a++){
//다건 처리시 이전셀이 삭제된것도 계산해야 함
tdstr[a]=$(row).find("td").eq(a+startpos - removecnt).text();

if(prevstr[a]==tdstr[a]){
// 시작셀 정보를 가지고 있다가 끝나면 사용함
if(spancnt[a]==1){
targetcell[a]=prevcell[a];
}

$(row).find("td").eq(a+startpos - removecnt).remove();
spancnt[a]++;
removecnt++;
} else {
// rowspan이 1인 것도 지정하면 테이블이 깨진다.
if(spancnt[a]>1){
$(targetcell[a]).attr("rowspan", spancnt[a]);
}
spancnt[a]=1;
}

prevcell[a]=$(row).find("td").eq(a+startpos - removecnt);
prevstr[a]=tdstr[a];
}
removecnt = 0;
}

// 마지막 행 처리
for(var x=0;x<arrsize ; x++){
if(spancnt[x]>1){
$(targetcell[x]).attr("rowspan", spancnt[x]);
}
}
}

줄맞춤이랑 변수 대소문자 따위하기 힘들다.
다 쓴 것도 용한것 같다 ㅡㅡ...

테이블은 대략 아래와 같이 만들어 놓으면 된다.
<table id="listtbl">
<tbody>
<tr>
<td>aa</td>
</td>
</tbody>
</table>

손가락 뿌사지는 줄 알았네..

댓글0