发文章
发文工具
撰写
网文摘手
文档
视频
思维导图
随笔
相册
原创同步助手
其他工具
图片转文字
文件清理
AI助手
留言交流
功能说明:
在左侧输入框中输入Json串,点击执行时根据输入的Json串在右侧展示区显示出相应的Html(使用Jquery1.4.4)
HTML:
<table style="width:100%; "> <col width="200px;" /> <tr> <td>Json输入框</td> <td>展示区</td> </tr> <tr> <td> <textarea id="txtJson" rows="20" cols="50"> </textarea> </td> <td valign="top"> <div id="divShow"> </div> </td> </tr> <tr> <td></td> <td> <input id="btnExec" type="button" value="执行" /> </td> </tr> </table>
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 = $("<label />"); switch (item.type) { case "textbox": control = createTextBox(); break; case "select": control = createSelect(item); break; case "password": control = createPassword(); break; //------------------------------ // 其它控件在这里加代码 //------------------------------ } if (item.title != null) { title.text(item.title); } if (control != null) { control = setAttritube(control, item); $("#divShow").append(title); $("#divShow").append(control); $("#divShow").append("<br/>"); } }) } //设置控件的样式 function setAttritube(control, item) { if (item.width != null) { control.width(item.width); } //-------------------------------- // 其他样式在这里加代码 //-------------------------------- return control; } //创建TextBox function createTextBox() { return $("<input type='textbox' />"); } //创建密码框 function createPassword() { return $("<input type='password'/>"); } //创建Select function createSelect(item) { var c = $("<select></select>"); if(item.items != null ){ $.each(item.items,function(index,i){ $("<option value='"+i.key+"' checked='checked'>"+i.value+"</option>").appendTo(c); }) } return c; }
非常感谢各位抽空看完。如果有任何意见或建议,请留言。
转载请指明出处 张*权。
来自: 昵称10504424 > 《Jquery》
0条评论
发表
请遵守用户 评论公约
为所有的textbox控件增加onblur事件
为所有的textbox控件增加onblur事件.
刷网课小玩意
JSON对象遍历
JSON对象遍历。// 遍历简单json对象 function traverseJsonSimpleObj(){ var jsonObj = {"name": "kevin", "age": 27, "sex": "男", "city&qu...
jquery Ajax 全局调用封装
jQuery.ax=function(url, data, async, type, dataType, successfn, errorfn) {async = (async==null || async=="" || typeof(async)=="undefined")?dataType = (dataType==null |...
基于原生的 html css js php ajax做的一个 web登录和注册系统(带发邮件功能)
//开启会话 4 5 /* 6 验证 $_SESSION["user"]会话 记录 是否存在 7 返回布尔值 8 */ 9 10 11 //如果$_SESSION["...
getJSON get方法传输数据
经典C# ListBox操作实况
Winform控件学习
Add("全选(Ctrl+A)"); ms.Items.Add("复制(Ctrl+C)"); ms.Items.Add("粘贴(Ctrl+V)"); ms.Items.Add("删除(Delete)"); ms.ItemClicked += new ToolStripItemC...
在ASP.NET MVC中使用DropDownList
由于TextBox的id和name属性的值与ViewData中的某一项同名(均为Name),因此TextBox的value属性的值将自动绑定为ViewData中Name项的值。如果ViewData和ViewData.Model中同时存在Name,则优先使用ViewDa...
微信扫码,在手机上查看选中内容