json2HTML table sample

HTML

<script src="http://json2html.com/js/json2html.js"></script>
<script src="http://json2html.com/js/jquery.json2html.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<div id="jsonTohtml">
</div>

CSS

.header_table{width:703px;border:1px solid #ddd}
.th1{width:100px}
.th2{width:200px}
.th3{width:200px}
.th4{width:200px}
td{border:1px solid #ddd}
.td1{width:100px;}
.td2{width:100px;}
.td3{width:100px;}
.td4{width:100px;}
.td5{width:100px;}
.td6{width:100px;}
.td7{width:100px;}

JavaScript

var data = [
    {"title":"현질병 상태","content1":"	주호소 또는 현재증상에 대한 추가 병력청취를 자세히 기록하였다 (위치, 심한정도, 발병기간, 형태, 진행속도나 유무, 악화 또는 완화요인, 동반 증상 중 4가지 이상)","content2":"주호소 또는 현재증상에 대한 추가 병력청취를 간단히 기록하였다 (위치, 심한정도, 발병기간, 형태, 진행속도나 유무, 악화 또는 완화요인, 동반 증상 중 3가지 이하).","content3":"주호소 또는 현재증상에 대한 추가 병력청취를 기록하지 않았다."}
];

var transform = {
"header":
	{"<>":"table","tag":"table","class":"header_table","html":[
		{"<>":"thead","tag":"thead","html":[
			{"<>":"tr","tag":"tr","html":[
				{"<>":"th","tag":"th","class":"th1","html":"평가점수"},
				{"<>":"th","tag":"th","class":"th2","colspan":"2","html":"우수"},
				{"<>":"th","tag":"th","class":"th3","colspan":"2","html":"충족"},
				{"<>":"th","tag":"th","class":"th4","colspan":"2","html":"미충족"}
			  ]}
		  ]},
			{"<>":"tbody","html":function(){
					return($.json2html(data,transform.item));  
				}	
			}	
		]
	},
"item":
	{"<>":"tbody","tag":"tbody","html":[
		{"<>":"tr","tag":"tr","html":[
			{"<>":"td","tag":"td","class":"td1","html":"평가항목"},
			{"<>":"td","tag":"td","class":"td2","html":"5","data-value":"5"},
			{"<>":"td","tag":"td","class":"td3","html":"4","data-value":"4"},
			{"<>":"td","tag":"td","class":"td4","html":"3","data-value":"3"},
			{"<>":"td","tag":"td","class":"td5","html":"2","data-value":"2"},
			{"<>":"td","tag":"td","class":"td6","html":"1","data-value":"1"},
			{"<>":"td","tag":"td","class":"td7","html":"0","data-value":"0"}
		]},
		{"<>":"tr","tag":"tr","html":[
			{"<>":"td","tag":"td","html":"${title}"},
			{"<>":"td","tag":"td","colspan":"2","html":"${content1}"},
			{"<>":"td","tag":"td","colspan":"2","html":"${content2}"},
			{"<>":"td","tag":"td","colspan":"2","html":"${content3}"}
		]}
	]}
};

$('#jsonTohtml').json2html({},transform.header);