json string_javascript 기술을 기반으로 HTML을 생성하는 방법

기사 설명:
이 기사에서는 Json 문자열을 기반으로 HTML을 생성하는 방법을 소개합니다(단순히 텍스트 상자, 비밀번호 상자 및 드롭다운 상자만 구현함). 그냥 재미삼아 하는 것인데 별 가치가 없다고 생각하시면 무시해주세요. 부족한 점을 지적해주시고 조언도 해주시면 좋겠습니다. 앞으로도 고객님의 지도를 토대로 지속적으로 개선해 나가도록 하겠습니다.

기능 설명:

왼쪽 입력창에 Json 문자열을 입력하고 클릭하여 실행하면 오른쪽 화면에 해당 화면이 나타납니다. 입력된 Json 문자열을 기준으로 영역을 지정합니다(Jquery1.4.4 사용)
HTML:

코드 복사 코드는 다음과 같습니다. 다음:

;/td>
< ;td>

;

Json 입력 상자 td>	;textarea id="txtJson" 행 ="20" cols="50">	>

> ;


JS 코드:




코드 복사


다음과 같습니다:

$(document).ready(function () {

　$("#btnExec").click(function () { try{ var objList = eval($("#txtJson").val()); jsonToControl(objList); } catch(e){ alert("json 형식 오류"); >}

});

});
function jsonToControl(jsonObj) {
$("#divShow").empty()
$.each(jsonObj, function (index) , item) {
var control = null ;
var title = $("")
switch(item.type) {
case "textbox":
control = createTextBox();
break
case "select":
control = createSelect(item);
break
case "password":
control = createPassword( );
break;
/ //---------------
//코드 추가 다른 컨트롤은 여기
//--- ----------------
}
if (항목 .title != null) {
title.text (item.title);
}
if (control != null) {
control = setAttritube(control, item)
$ ("#divShow").append(제목);
$("#divShow").append(control)
$("#divShow").append("
") ;
}
})
}
//컨트롤 스타일 설정
function setAttritube(control, item) {
if (item.width != null) {
control.width(item.width);
}
//------------------ --
//여기에 다른 스타일에 대한 코드 추가
//------------------
return control;
}
// 텍스트 상자 만들기
function createTextBox() {
return $(""); //비밀번호 상자 생성
function createPassword() {
return $("")
}
//선택 생성
function createSelect (항목) {
var c = $( "")
if(item.items != null ){
$.each(item.items,function (index,i){
$(" " i.value "").appendTo(c)
})
}
return c;
}


시간을 내어 읽어주셔서 정말 감사합니다. 의견이나 제안사항이 있으시면 메시지를 남겨주세요.