Javascript Json 을 Html 테이블로 변환

Json을 입력 할 시 Key는 Header로, Value는 각 Key에 해당하는 Value로 하여 Html 테이블을 만든다.

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('');     tableStr.push('');           let titleStr = []     let cntntStr = []           let titlekeys = Object.keys(oJson[0]);     let titlekeyCnt = titlekeys.length;       titleStr.push('')     for (let i = 0; i &lt; titlekeyCnt; i++) {           titleStr.push('');       }     titleStr.push('')         //------------------------------------------       let jsonCnt = oJson.length;     for (let i = 0; i &lt; jsonCnt; i++) {         let keys = Object.keys(oJson[i]);         let keyCnt = keys.length;           cntntStr.push('')         for (let j = 0; j &lt; keyCnt; j++) {               cntntStr.push('');           }         cntntStr.push('')     }       tableStr.push(titleStr.join(""))     tableStr.push(cntntStr.join(""))       tableStr.push('');       tableStr.push('<table style="border-collapse: collapse; border: 1px solid rgb(199 , 199 , 199); text-align: right;"><tbody> <tr><td>');         titleStr.push(titlekeys[i]);         titleStr.push('</td></tr> <tr><td>');             cntntStr.push(oJson[i][keys[j]]);             cntntStr.push('</td></tr> </tbody></table> ');     document.write(tableStr.join("")) }; Colored by Color Scripter

cs