동적테이블 생성

 

Jquery를 사용해서 동적으로 생성되는 테이블.

 

출석이벤트 관련사항을 진행하다가 만들어봄.

 

Jquery로 element 생성과 class, css 지정. Callback 함수 호출.

 

function fn_initTable(colCnt, cellCnt, checkCnt, callback) {

            

    var tblObj = $("table");

    var dateNo = 1;

            

    if(isNull(cellCnt)) cellCnt = 30;

            

    var rowCnt = Math.ceil(cellCnt /colCnt) ;

            

    for (var r_idx=0; r_idx<rowCnt; r_idx++) {

                

        var trObj = $("<tr/>");

          

        for(var c_idx=0; c_idx < colCnt; c_idx++) {

            var tdObj = $('<td/>');

              

            var dvObj = $('<div/>');

              

            if(dateNo <= cellCnt) {

                dvObj.html(dateNo);

            }

              

            if(dateNo <= checkCnt) {

                

                dvObj.addClass("completed");

                dvObj.css("background-image", "url('/image/sample.jpg')");

                dvObj.css("background-repeat", "no-repeat");

                dvObj.css("background-size", "100% 100%");

            }

              

            tdObj.append(dvObj);

              

            trObj.append(tdObj);

                    

            dateNo++

                }

        tblObj.append(trObj);

    }

      

      

    if (callback && typeof(callback) === "function") {

        callback(tblObj);

    }

}