Table의 td동적으로 삭제/추가 예제.

화면에 존재하는 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

        }