스크립트로 테이블 자동 생성

배열만 선언하면, 알아서 테이블 <thead>, <th> 태그 자동 생성하기

let arrName = ['게시물 번호','제목','내용','작성자','작성일','첨부파일 개수','공지여부'];
let arrRef = ['POST_NO','TITLE','CONTENT_VIEW','WRITE_MAN','WRITE_DT','FILE_CNT','USE_YN'];
let arrWidth = ['500','300','400','100','100','100','100'];
let arrType = ['','','','','', 'number',''];

arrName : <th>에 들어갈 이름

arrRef : 엑셀로 해당 테이블 다운로드할 때, 필요한 파라미터 -> JSON 형태로 변환할 때 필요함

arrWidth : <th>의 너비

arrType : 값의 타입이 number, string인지 구분

---

$(function(){			
	tableSet("tablegrid1", arrName, arrWidth); //테이블 데이터 셋팅
});

    //테이블 내부 자동 생성 함수
    //param info : 테이블ID, th항목명칭, th항목너비
    function tableSet(tbId, thName, thWidth){

        //변수 길이 체크
        if(thWidth.length != thName.length){
            alert("테이블 생성 변수 길이가 다릅니다.");
            return;
        }

        //선언부
        let gridID = tbId.substr(5); //그리드ID는 tbName변수 앞5자리 자른 값으로 자동생성 -> ex)테이블(table)ID:tablegrid1, 그리드영역(tbody)ID:grid1		
        let totalWidth = 0; //테이블 width
        let tableData = ''; //테이블 데이터

        //colgroup영역
        tableData = '<colgroup>';		
        for(let i=0; i<thWidth.length; i++){
            tableData += `<col style="width: \${nvl(thWidth[i])}px">`
            totalWidth += Number(thWidth[i]);
        }		
        tableData += '</colgroup>'

        //thead영역
        tableData = '<thead><tr>';		
        for(let i=0; i<thName.length; i++){
            tableData += `<th>\${nvl(thName[i])}</th>`;
        }		
        tableData += `</tr></thead><tbody id="\${gridID}"></tbody>`;

        //테이블 생성
        $('#' + tbId).append(tableData);
        $('#' + tbId).css('width', totalWidth);
    }

이렇게 만들면, 테이블의 <th> 데이터가 채워지고, 각각의 너비도 알아서 채워진다. 

또한 테이블의 전체 너비가 <col> 너비의 합이 되기 때문에, 테이블 전체 너비를 굳이 하나하나 계산해서 전체 값을 적용할 필요가 없다.

---