집 >
웹 프론트엔드 >
JS 튜토리얼 >
json string_javascript 기술을 기반으로 HTML을 생성하는 방법
json string_javascript 기술을 기반으로 HTML을 생성하는 방법
WBOY
풀어 주다: 2016-05-16 17:44:00
원래의
1420명이 탐색했습니다.
기사 설명: 이 기사에서는 Json 문자열을 기반으로 HTML을 생성하는 방법을 소개합니다(단순히 텍스트 상자, 비밀번호 상자 및 드롭다운 상자만 구현함). 그냥 재미삼아 하는 것인데 별 가치가 없다고 생각하시면 무시해주세요. 부족한 점을 지적해주시고 조언도 해주시면 좋겠습니다. 앞으로도 고객님의 지도를 토대로 지속적으로 개선해 나가도록 하겠습니다.
기능 설명:
왼쪽 입력창에 Json 문자열을 입력하고 클릭하여 실행하면 오른쪽 화면에 해당 화면이 나타납니다. 입력된 Json 문자열을 기준으로 영역을 지정합니다(Jquery1.4.4 사용) HTML:
}); 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){ $(" ").appendTo(c) }) } return c; }
시간을 내어 읽어주셔서 정말 감사합니다. 의견이나 제안사항이 있으시면 메시지를 남겨주세요.