javascript拼接html代码
转自开源中国社区:http://www.oschina.net/code/snippet_94055_21640
经常做jsp开发的朋友可能遇到一个情况,显示列表数据不是table,而是div或者其他很多标签做的一种更漂亮的样式列表。如果采用ajax更新列表数据,可能有些朋友采用“html代码拼接”的方式,比如:"<a>"+json.name+"</a>"这样的方法。
下面我提供一个思路,可以不需要拼接html代码,并且适用任何复杂的列表。
代码说明:
1. 适用于ajax获取数据然后需要通过拼接html代码的方式实现数据列表展现的需求/功能
2. html模板最好有一个父元素, 因为最后clone的模板都是插入在父元素内部后面
3. 代码中最关键的部分当然是js的实现. 理解js部分主要是clone、each、append、replace这几个方法的理解和应用
// 希望对大家有用
[1].[代码] html代码示例 跳至 [1] [2]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
< div class = "modal-body" style = "height: 300px; overflow: auto" > < ul class = "thumbnails" > <!-- 注意id='template' 这里定义一个数据模板. id为template 然后里面需要显示值的地方用#key#的形式占位, 可以出现多次. key与json返回的对象的name保持一致. 刚开始编写模板的时候, 可以不设置 display: none; 方便查看模板样式. 测试的时候, 设置目标 display: none; --> < li class = "span1" id = 'template' style = 'display: none;' > < a href = "javascript:;" class = "thumbnail" > < label for = "#id#" > < img src = "${pageContext.request.contextPath }/resource/image/#logo#" alt = "" > </ label > </ a > < p style = "text-align: center" >< input id = "#id#" type = "checkbox" value = "#id#" style = "opacity: 1;" >#name#</ p > </ li > <!-- 数据为空的时候显示的提醒信息. 不是必须. 需要的朋友主要是了解下javascript部分关键代码实现思路就可以了, 了解后随便怎么写都OK... --> < li class = "span1" id = 'template_nodata' style = 'display: none;' > 吖! 人呢? (没有可供选择的用户) </ li > </ ul > </ div > |
[2].[代码] js实现模板复制和数据填充 跳至 [1] [2]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
|
function demo() { $.post( '${pageContext.request.contextPath}/demo/getData.htm' , function (data) { if (data.list.length > 0) { var hasHandler = typeof (valHandler) == 'function' ; // 是否有定义val额外处理的函数 var template = $( '#template' ); // 循环json格式对象 $.each(data.list, function (i, obj) { // 克隆当前数据模板, 清除id, 设置显示 // jQuery也有removeAttr()方法可以清除id, 看个人习惯 // 之所以清除id, 是为了保持id的唯一性, 并且模板id不能重复 // clone(true)是把事件一起clone var temp = template.clone( true ).attr( 'id' , '' ).show(); var html = temp.html(), regx; // 取模板里的html字符串; 定义正则变量 // obj为json中的对象; key对应json对象的属性, val就是json的val值 $.each(obj, function (key, val) { if (hasHandler) { // 对'指定属性'的value进行特殊处理, 如value为空需指定默认值 val = valHandler(key, val); } // 动态创建正则 // 例如:#name#/g 替换所有 #name# regx = new RegExp( '#' +key+ '#' , 'g' ); html = html.replace(regx, val || '' ); // 将占位符替换成实际值, 如果 val为null, 将原有的#name#占位符替换成'' }); // temp.html(html)是把html字符有替换回去 // 然后追加到目标的父容器的后面 template.parent().append(temp.html(html)); }); // $.each } else { $( '#template_nodata' ).show(); } }); // ajax获取数据 } // valHandler必须定义, // 如果不定义, 上述代码var hasHandler = typeof(valHandler) == 'function';部分会报错为定义对象 // 该函数的意义是针对需要二次处理的字段进行处理 function valHandler(key, val) { if (key == 'logo' && !val) { // 如果logo为空, 路径改成默认logo路径 val = 'defaultLogo.png' ; } return val; } |
javascript拼接html代码的更多相关文章
- JavaScript拼接html字符串时截断问题
在项目中碰到一个问题,就是JavaScript拼接html标签时,里面特殊字符会有些问题,比如单引号截断配对,导致后面的内容不显示或显示错误.在此记录一下. 下面贴一段简化的代码,若有描述不清的地方还 ...
- Javascript 语言精粹 代码片段合集
Javascript 语言精粹 代码片段合集 标签:Douglas-Crockford Javascript 最佳实践 原文链接 更好的阅读体验 使用一个method 方法定义新方法 Function ...
- WebBrowser一点心得,如果在Javascript和Winform代码之间实现双向通信
原文:WebBrowser一点心得,如果在Javascript和Winform代码之间实现双向通信 最近工作需要,学习了一下winform内嵌webbrowser控件,然后与htm页面中的javasc ...
- Notepad++ 配置 支持jquery、html、css、javascript、php代码提示
原文:Notepad++ 配置 支持jquery.html.css.javascript.php代码提示 官网下载:http://notepad-plus-plus.org/ 获取插件的方法:打开软件 ...
- ASP.NET 前台Javascript调用后台代码 / 后台调用前台Javascript
1:ASP.NET 前台Javascript调用后台代码 1.1:前台Javascript <script> function CallCs() { var str = "< ...
- 一步一步学Silverlight 2系列(22):在Silverlight中如何用JavaScript调用.NET代码
概述 Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,如支持框架语言Visual Basic, Visual C#, IronRuby, ...
- 浅谈javascript引擎执行代码的步骤-(2019-2)
平时面试经常会遇到类似下面的这种题,而且千变万化,让人一个头两个.示例这道题算是稍微有点难度的了,这种题考查的是JavaScript引擎执行代码的步骤. b = 'cba'; function a(a ...
- electron教程(番外篇一): 开发环境及插件, VSCode调试, ESLint + Google JavaScript Style Guide代码规范
我的electron教程系列 electron教程(一): electron的安装和项目的创建 electron教程(番外篇一): 开发环境及插件, VSCode调试, ESLint + Google ...
- JavaScript中的代码执行顺序
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> </head&g ...
随机推荐
- Win7用IIS发布网站系统 部署项目
1.首先确保系统上已经安装IIS [控制面板]→[程序]→[程序和功能]→[打开或关闭Windows功能] 选中Internet 信息服务下面的所有选项,点击确定. 2. 获得发布好的程序文件 若没有 ...
- 奇特的JavaScript连续赋值运算
一.引子: }; a.x = a = {n:}; alert(a.x); // --> undefined 以上第二句 a.x = a = {n:2} 是一个连续赋值表达式.这个连续赋值表达式在 ...
- Yii2系列教程三:Database And Gii
上一篇文章我们理了一下Yii2的MVC,Forms和Layouts,这篇文章就直接按照约定来说说Yii2与数据库相关的一些事情,如果你觉得不够的话,不急,更具体的用法我会在后续的教程给出,并且这里也会 ...
- PostgreSQL学习资料
我的PostgreSQL学习笔记:http://note.youdao.com/share/?id=2e882717fc3850be9af503fcc0dfe7d0&type=notebook ...
- php中一些函数的用法
addslashes() 定义和用法 addslashes() 函数返回在预定义字符之前添加反斜杠的字符串. 预定义字符是: 单引号(') 双引号(") 反斜杠(\) NULL 提示:该函数 ...
- 执行时的C程序
数据和代码 编程语言理论经典对立之中的一个就是代码和数据的差别.有些语言如LISP把两者视为一体,其它语言如C语言则维持两者的差别.编译绝大部分工作都跟翻译代码有关,必要的数据存储管理的绝不部分都在执 ...
- Visual studio C++ MFC之点击按钮(菜单栏)生成新窗口
背景 当前做的APP有菜单栏,菜单栏有一项需要对下位机相关参数进行设置,则必须弹出一个窗口来实现设置操作.本篇即对点击菜单栏生成新的窗口,在新的窗口内完成相应计划后结束新窗口并返回原窗口的方法进行简述 ...
- Yii2.0 下使用 composer 安装七牛
最近在捣鼓一个网站,要上传图片,于是选择了七牛.由于Yii2.0框架本身并不具有七牛用来上传图片的接口,只能自己动手给Yii2.0框架安装七牛了. 首先在根目录下的 composer.json 进行配 ...
- Linux 时间修改--date -s命令
Linux 时间修改 不重启修改时区 一.修改linux的时间root使用date指令:date -s1.只修改日期,不修改时间,输入:Linux代码 1. date -s 2007-08-03 da ...
- 软件质量特征 ISO9126
ISO/IEC9126软件质量模型是一种评价软件质量的通用模型,包括3个层次: 1.质量特性 2.质量子特性 3.度量指标 其中各六个质量特性与二十七个质量子特性的关系如下表: 1.功能性 是指当软件 ...