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; }

转载于:https://www.cnblogs.com/santian/p/4815385.html