[Javascript] Json 을 Html 테이블, 표로 변환

oJson 값에 Json을 넣고 돌리면 tableStr 에서 html 테이블, 표로 변환해서 반환

이 때 Json Key 들은, Title이 되고, Value는 Title에 해당하는 값이 된다.

 

function fn_ConvertJsonToTable(oJson, titleStyle, cntntStyle) {

    titleStyle = ['font-size: 10pt; color: rgb(0, 0, 0); border: 1px solid rgb(199, 199, 199);text-align: center; width: 108px; height: 18px; background-color: rgb(243, 243, 243); font-weight: bold;', 'font-size: 10pt; color: rgb(0, 0, 0); border: 1px solid rgb(199, 199, 199);text-align: center; width: 108px; height: 18px; background-color: rgb(243, 243, 243); font-weight: bold;', 'font-size: 10pt; color: rgb(0, 0, 0); border: 1px solid rgb(199, 199, 199);text-align: center; width: 108px; height: 18px; background-color: rgb(243, 243, 243); font-weight: bold;', 'font-size: 10pt; color: rgb(0, 0, 0); border: 1px solid rgb(199, 199, 199);text-align: center; width: 108px; height: 18px; background-color: rgb(243, 243, 243); font-weight: bold;', 'font-size: 10pt; color: rgb(0, 0, 0); border: 1px solid rgb(199, 199, 199);text-align: center; width: 108px; height: 18px; background-color: rgb(243, 243, 243); font-weight: bold;', 'font-size: 10pt; color: rgb(0, 0, 0); border: 1px solid rgb(199, 199, 199);text-align: center; width: 108px; height: 18px; background-color: rgb(243, 243, 243); font-weight: bold;', 'font-size: 10pt; color: rgb(0, 0, 0); border: 1px solid rgb(199, 199, 199);text-align: center; width: 108px; height: 18px; background-color: rgb(243, 243, 243); font-weight: bold;', 'font-size: 10pt; color: rgb(0, 0, 0); border: 1px solid rgb(199, 199, 199);text-align: center; width: 108px; height: 18px; background-color: rgb(243, 243, 243); font-weight: bold;', 'font-size: 10pt; color: rgb(0, 0, 0); border: 1px solid rgb(199, 199, 199);text-align: center; width: 108px; height: 18px; background-color: rgb(243, 243, 243); font-weight: bold;', 'font-size: 10pt; color: rgb(0, 0, 0); border: 1px solid rgb(199, 199, 199);text-align: center; width: 108px; height: 18px; background-color: rgb(243, 243, 243); font-weight: bold;', 'font-size: 10pt; color: rgb(0, 0, 0); border: 1px solid rgb(199, 199, 199);text-align: center; width: 108px; height: 18px; background-color: rgb(243, 243, 243); font-weight: bold;', 'font-size: 10pt; color: rgb(0, 0, 0); border: 1px solid rgb(199, 199, 199);text-align: center; width: 108px; height: 18px; background-color: rgb(243, 243, 243); font-weight: bold;']
    cntntStyle = ["border: 1px solid rgb(199, 199, 199);", "border: 1px solid rgb(199, 199, 199);", "border: 1px solid rgb(199, 199, 199);", "border: 1px solid rgb(199, 199, 199);", "border: 1px solid rgb(199, 199, 199);", "border: 1px solid rgb(199, 199, 199);", "border: 1px solid rgb(199, 199, 199);", "border: 1px solid rgb(199, 199, 199);", "border: 1px solid rgb(199, 199, 199);", "border: 1px solid rgb(199, 199, 199);", "border: 1px solid rgb(199, 199, 199);", "border: 1px solid rgb(199, 199, 199);"]

    let sJson = '[{"_DS":"dsExcalDesc2","ExcalID":"84766135605957075","PrfrmCd":400005,"ExcalTermCd":"202002","PrfrmPrftCd":3,"PrfrmPrftNm":"총회차","Val":"3000","Remark":null,"LastExcalYN":"false","ExcalTpCd":975,"ChrgDeptCd":"","ChrgID":""},{"_DS":"dsExcalDesc2","ExcalID":"84766135605957075","PrfrmCd":400005,"ExcalTermCd":"202002","PrfrmPrftCd":4,"PrfrmPrftNm":"당월회차","Val":"400","Remark":null,"LastExcalYN":"false","ExcalTpCd":975,"ChrgDeptCd":"","ChrgID":""},{"_DS":"dsExcalDesc2","ExcalID":"84766135605957075","PrfrmCd":400005,"ExcalTermCd":"202002","PrfrmPrftCd":1,"PrfrmPrftNm":"유료입장객","Val":"400","Remark":null,"LastExcalYN":"false","ExcalTpCd":975,"ChrgDeptCd":"","ChrgID":""},{"_DS":"dsExcalDesc2","ExcalID":"84766135605957075","PrfrmCd":400005,"ExcalTermCd":"202002","PrfrmPrftCd":2,"PrfrmPrftNm":"무료입장객","Val":"100","Remark":null,"LastExcalYN":"false","ExcalTpCd":975,"ChrgDeptCd":"","ChrgID":""}]'
    oJson = JSON.parse(sJson);

    let tableStr = []
    tableStr.push('<table style="text-align: right; border: 1px solid rgb(199, 199, 199);border-collapse: collapse;">');
    tableStr.push('<tbody>');



    let titleStr = []
    let cntntStr = []



    let titlekeys = Object.keys(oJson[0]);
    let titlekeyCnt = titlekeys.length;

    titleStr.push('<tr>')
    for (let i = 0; i < titlekeyCnt; i++) {

        titleStr.push('<td style="' + titleStyle + '">');
        titleStr.push(titlekeys[i]);
        titleStr.push('</td>');

    }
    titleStr.push('</tr>')


    //------------------------------------------

    let jsonCnt = oJson.length;
    for (let i = 0; i < jsonCnt; i++) {
        let keys = Object.keys(oJson[i]);
        let keyCnt = keys.length;

        cntntStr.push('<tr>')
        for (let j = 0; j < keyCnt; j++) {

            cntntStr.push('<td style="' + cntntStyle[j] + '">');
            cntntStr.push(oJson[i][keys[j]]);
            cntntStr.push('</td>');

        }
        cntntStr.push('</tr>')
    }

    tableStr.push(titleStr.join(""))
    tableStr.push(cntntStr.join(""))

    tableStr.push('</tbody>');

    tableStr.push('</table>');
    document.write(tableStr.join(""))
};