A way to generate Html based on json string_javascript skills-JS Tutorial-php.cn

Article Description:
This article introduces a way to generate Html based on Json string (it only simply implements text boxes, password boxes, and drop-down boxes). I'm just doing this for fun. If you don't think it has any value, please ignore it. I hope you guys can point out the shortcomings and give me some advice. We will continue to improve it based on your guidance in the future.

Function Description:
A way to generate Html based on json string_javascript skills

Enter the Json string in the left input box. When you click to execute, the corresponding display will be displayed in the right display area based on the entered Json string. Html (using Jquery1.4.4)
HTML:

Copy code The code is as follows:

< ;td>

JS code:

Copy code The code is as follows:

$(document).ready(function () {
　$("#btnExec").click(function () {
try{
var objList = eval($("#txtJson"). val());
jsonToControl(objList);
}
catch(e){
alert("json format error");
}
});
});
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;
/ //-----------------------------
//Add codes for other controls here
//--- -----------------------------
}
if (item.title != null) {
title.text (item.title);
}
if (control != null) {
control = setAttritube(control, item);
$("#divShow").append(title);
$("#divShow").append(control);
$("#divShow").append("
");
}
})
}
//Set the style of the control
function setAttritube(control, item) {
if (item.width != null) {
control.width(item.width);
}
//--------------------------------
//Add code for other styles here
//-----------------------------
return control;
}
// Create TextBox
function createTextBox() {
return $("");
}
//Create password box
function createPassword() {
return $("");
}
//Create Select
function createSelect(item) {
var c = $( "");
if(item.items != null ){
$.each(item.items,function(index,i){
$(" ").appendTo(c);
})
}
return c;
}

Thank you very much for taking the time to read it. If you have any comments or suggestions, please leave a message.

Related labels：

json string

source：php.cn

Previous article：jquery plug-in collection (partial picture enlargement/information prompt box)_jquery Next article：Various front-end printing methods on the web: jquery printing plug-in jqprint realizes web page printing_jquery

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn