根据json字符串生成Html的一种方式

文章说明：
本文介绍了根据Json串生成Html的一种方式（只是简单实现了文本框，密码框，下拉框）。只是觉得好玩才这样做，如果觉得没有任何价值，请忽略。不足指出希望各位大牛指点。后续将根据各位的指点继续完善。

功能说明：

在左侧输入框中输入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;
}

非常感谢各位抽空看完。如果有任何意见或建议，请留言。

赞 (0)

相关推荐

  • 如何使用JS在HTML中自定义字符串格式化

    如何使用JS在HTML中自定义字符串格式化

    Python中支持字符串格式化,其基本形式如下: str = "I'm %s, %s years old." % ('jack', 19) print(str) #结果: I'm jack, 19 years old. 在JavaScript中虽没有类似的方法,但我们可以利用字符串的replace方法自定义字符串的格式化方法: <script> $(function () { /*自定义字符串格式化*/ String.prototype.Format = function

  • js Html结构转字符串形式显示代码

    复制代码 代码如下: //Html结构转字符串形式显示 支持<br>换行 function ToHtmlString(htmlStr) { return toTXT(htmlStr).replace(/\&lt\;br[\&ensp\;|\&emsp\;]*[\/]?\&gt\;|\r\n|\n/g, "<br/>"); } //Html结构转字符串形式显示 function toTXT(str) { var RexStr = /

  • javascript中html字符串转化为jquery dom对象的方法

    原html字符串如下: var text="<div id='overLay' style='width:50px;height:60px;background:url(imgs/back.png) left top no-repeat; position: absolute;'>" + "<img style='margin-left:4px;margin-top: 3px;' src='ima.png' width='43px' height='43px

  • 对字符串进行HTML编码和解码的JavaScript函数

    编码函数: 复制代码 代码如下: function HtmlEncode(str) { var t = document.createElement("div"); t.textContent ? t.textContent = str : t.innerText = str; return t.innerHTML; } 解码函数: 复制代码 代码如下: function HtmlDecode(str) { var t = document.createElement("di

  • JavaScript检测字符串中是否含有html标签实现方法

    功能代码 复制代码 代码如下: /**  * 字符串是否含有html标签的检测  * @param htmlStr  */ function checkHtml(htmlStr) {     var  reg = /<[^>]+>/g;     return reg.test(htmlStr); } demo script: 复制代码 代码如下: /**  * 字符串是否含有html标签的检测  * @param htmlStr  */ function checkHtml(htmlSt

  • javascript中拼接HTML字符串的最快、最好的方法

    javascript中拼接HTML字符串的最快、最好的方法

    第一种:逐个字符串相加 复制代码 代码如下: var arr = ['item 1', 'item 2', 'item 3', ...];list = '';for (var i = 0,l = arr.length; i < l; i++) {    list += '' + arr[i] + '';}list = '' + list + ''; 这种最常见的,但是效率最低!代码逻辑相对来说复杂. 第二种:逐个 push 进数组 复制代码 代码如下: var arr = ['item 1',

  • 在JS中解析HTML字符串示例代码

    在js中直接添加html语句,js会将html字符串解析成相应的HTML语句,并在前端进行显示. 复制代码 代码如下: <span style="font-size:14px;">var el = document.createElement( 'div' ); el.innerHTML = "<html><head><title>titleTest</title></head><body>&

  • js拼接html字符串的注意事项

    +加好拼接如果不换行,是不会出现执行一段一段执行的情况,但是字符串太长了,换行之后会出现一段一段执行的情况,这样页面生成的div等就不是想要的结果了. 换行要这样拼接 var s='<li class="todetail" data-id="'+ one.id+'"><p class="dd_time">'+ one.leasetime+'</p><div class="info-box&quo

  • 根据json字符串生成Html的一种方式

    根据json字符串生成Html的一种方式

    文章说明:本文介绍了根据Json串生成Html的一种方式(只是简单实现了文本框,密码框,下拉框).只是觉得好玩才这样做,如果觉得没有任何价值,请忽略.不足指出希望各位大牛指点.后续将根据各位的指点继续完善. 功能说明: 在左侧输入框中输入Json串,点击执行时根据输入的Json串在右侧展示区显示出相应的Html(使用Jquery1.4.4) HTML: 复制代码 代码如下: <table style="width:100%; "> <col width="2

  • C#中对象与JSON字符串互相转换的三种方式

    C#中对象与JSON字符串互相转换的三种方式

    JSON(JavaScriptObject Notation, JS 对象标记) 是一种轻量级的数据交换格式. 关于内存对象和JSON字符串的相互转换,在实际项目中应比较广泛,经过一番搜索,找到如下三种方法来解决此问题 分别是使用Newtonsoft.Json.dll.DataContractJsonSerializer.JavaScriptSerializer. 方法一:Newtonsoft.Json.dll Newtonsoft.Json.dll在.net2.0之后的版本可以支持 我的版本.

  • Java实现Json字符串与Object对象相互转换的方式总结

    本文实例总结了Java实现Json字符串与Object对象相互转换的方式.分享给大家供大家参考,具体如下: Json-Lib.Org.Json.Jackson.Gson.FastJson五种方式转换json类型 只列举了最省事的方式.不涉及复制情况和速度. 测试用例,一个User类,属性name,age,location.重写toString(). public class User { private String name; private Integer age; private Stri

  • Python之字符串的遍历的4种方式

    python的字符串遍历有4种方式: 1. 下标法 2. for in 3. iter内置函数 4. enumerate 其中下标法和enumerate适合需要判断后续字符的场景,比如循环到下标index出,要求判断index+1的字符这种.最典型的题目就是语法解析器,判断"(())"这种成对的括号的算法. "for in"和iter适合对字符进行直接处理的一类题目,比如大小准换,字符串对比之类的. 总之,如果需要用到下标就使用下标法和enumerate,其中enu

  • Java中生成随机数的4种方式与区别详解

    Java中生成随机数的4种方式与区别详解

    目录 在 Java 中,生成随机数的场景有很多,所以本文我们就来盘点一下 4 种生成随机数的方式,以及它们之间的区别和每种生成方式所对应的场景. 1.Random Random 类诞生于 JDK 1.0,它产生的随机数是伪随机数,也就是有规则的随机数.Random 使用的随机算法为 linear congruential pseudorandom number generator (LGC) 线性同余法伪随机数.在随机数生成时,随机算法的起源数字称为种子数(seed),在种子数的基础上进行一定的

  • java中String字符串删除空格的七种方式

    java中String字符串删除空格的七种方式

    目录 trim() strip() stripLeading() 和 stripTrailing() replace replaceAll replaceFirst 总结 在Java中从字符串中删除空格有很多不同的方法,如trim,replaceAll等.但是,在JDK 11添加了一些新的功能,如strip.stripLeading.stripTrailing等. 想要从String中移除空格部分,有多少种方法,下面介绍JDK原生自带的方法,不包含第三方工具类库中的类似方法 trim() : 删

  • C#中实现Json序列化与反序列化的几种方式

    C#中实现Json序列化与反序列化的几种方式

    什么是JSON? JSON (JavaScript Object Notation) is a lightweight data-interchange format. It is easy for humans to read and write and easy for machines to parse and generate. JSON is a text format that is completely language independent. 翻译:Json[javascrip

  • PHP中快速生成随机密码的几种方式

    思路是这样的,密码通常是英文字母和数字的混合编排,我们可以借助随机函数rand函数随机的选择一个长字符串的一部分. function random_code($length = 8,$chars = null){ if(empty($chars)){ $chars = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789'; } $count = strlen($chars) - 1; $code = ''; while(

  • ASP中生成文本文件的两种方式

    ASP里两种常用的生成文件的方式是:利用ADODB.Stream生成文件和利用Scripting.FileSystemObject生成文件 1.Scripting.FileSystemObject生成文件方法:  复制代码 代码如下: <%  Set fso = CreateObject("Scripting.FileSystemObject")  File=Server.MapPath("要生成文件路径和文件名.htm")  Set txt=fso.Open

  • Java转JSON串的几种方式

    昨天在与对端系统调接口的时候,对端系统对我们传过去的json串老是处理不了,后来查原因是应为我们传过去的json串里有json对象数组,因为我们的json串存在表里的,取出来是作为json字符串放到json数组里的,所以带了双引号,对端认为是字符串,不是json对象所以处理不了. [{"cardName":"bankCard1","cardCode":"888888888","cardValue":9999

随机推荐