화면에 존재하는 id가 item_table인 테이블의 자식들을 모두 지우고
순서를 변경해서 모두 다시 add 하는 예제. (가상의 data라는 정보를 이용해서 추가함)
(예쁘게 add하기 위해 colspan을 항상 조정 함.)
이 때, tr은 매번 만들어서 추가하는 방식 임.
테이블은 한 row당 4개의 항목 (th+td가 한항목)까지 max로 들어가므로 총 12개의 colspan을 이용해 추가함.
var table = $('#item_table');
var itemsTh = $('#item_table th');
var itemsTd = $('#item_table td');
//remove all
table.children().remove();
var items = []; //sorted MenuItem data
//sort
for (var i = 1; i <= data.length; i++) { //itemOrd는 1부터 시작.
for (var j = 0; j < data.length; j++)
if(data[j].itemOrd == i && data[j].useYn == 'Y') //useYn도 여기서 check필요.
items.push(data[j]);
}
var newTr = $('<tr> </tr>');
var sumColspan = 0;
var colspan;
var tdIdx;
//items 다시add to tr -> table
for (var i = 0; i < items.length; i++) {
//find th/td
tdIdx = findTdNum(items[i].itemCd, itemsTd);
//add to tr, td는 colspan setting max 12개 td기준.
itemsTh.eq(tdIdx).text(items[i].itemNm);
sumColspan += 1;
newTr.append(itemsTh[tdIdx]);
colspan = getColspan(items[i].itemStep);
//colspan 조정.(여분 tr을 꽉 채우기) max=12
var nextColspan = getNextColspan(items.length, i+1, items );
colspan = adjustColspan(colspan, sumColspan, nextColspan );
sumColspan += colspan;
itemsTd.eq(tdIdx).attr('colspan', colspan);
newTr.append(itemsTd[tdIdx]);
//tr이 꽉차면 add tr 2 table
if (sumColspan >= 12) {
table.append(newTr); //test
newTr = $('<tr> </tr>');
sumColspan = 0;
}
} //items LOOPS
if (sumColspan != 0) {
//마지막 colSpan정리
var finalColspan = adjustColspan(colspan, sumColspan-colspan, 99);
itemsTd.eq(tdIdx).attr('colspan', finalColspan); //마지막 colspan재설정.
table.append(newTr); //마지막 남은 tr add
}
