注册 登录  
 加关注
查看详情
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

Copper peas ' Bolg

Keep On Moving...This Is My Life...

 
 
 

日志

 
 

【原】js动态创建html标签与js完全剥离方法  

2011-05-03 23:41:17|  分类: javascript |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

原创:铜豌豆 http://csq-3.blog.163.com/blog/static/38738439201143114025474/

js动态创建的html表格或者是列表,总会造成js里嵌套许多html 代码

有办法把js与html剥离出来嘛,查了网,还没有方法。

想了一天时间,结合自己其他程序的经验,下了下面的代码。

初步使用没有发现问题,如项目后期使用有问题,修正转换匹配函数即可,方法还是可行的。

//剥离主函数

function js_html(json)
{
 //循环重新定义对应变量
 for(var jsoni in json)
    { 
  eval ("var "+jsoni+"=json."+jsoni+";");   
 }
 //匹配替换
 var arr=string.match(/{@(\w+|\w+\[\w+\]|\w+\[\w+\]\.\w+|\w+\.\w+)@}/ig);
 if(arr!=null){
  for(var htmljs=0; htmljs<arr.length;htmljs++)
  {        
    var patt = /{@(\w+|\w+\[\w+\]|\w+\[\w+\]\.\w+|\w+\.\w+)@}/i;
    var valuearr = patt.exec(arr[htmljs]);
    valuearr[0]=valuearr[0].replace(new RegExp("[\[]","ig"),"[\\[]");
    string=string.replace(new RegExp(valuearr[0],"ig"), eval(valuearr[1]));
  }
 }
 return string;
}

 

//ajax 返回数据函数

function conflist(data)
{
  var result = data;
  var obj    = result.record;
  var json={string:html.stringmsg};
  var stringmsg =js_html(json);
  if (obj.length>0){;
   for(var v in obj)
   { 
            var json={v:v,string:html.confcontext,obj:obj}
            stringmsg=stringmsg+js_html(json); 
   }
  }
  else
  {
  var json={string:html.errexits};
  stringmsg   =stringmsg+js_html(json);
  } 
  //翻页导航
  var json={id:id,string:html.pagestring,result:result}
  var pagestring=js_html(json); 
  //alert(stringmsg);
  $("#content").html(stringmsg);
  $("#dhcontent").html(pagestring);   
}

原创:铜豌豆 http://csq-3.blog.163.com/blog/static/38738439201143114025474/

//剥离出来的html

/*
 *js动态创建html标签 剥离文件
 */
var html={};
html.confcontext='<tr class="conftr" id="conftr{@obj[v].id@}"><td  class="liststyle">{@obj[v].key@}</td><td class="liststyle">{@obj[v].value@}</td><td class="liststyle"><a class="look" id="look-{@obj[v].id@}">检验</a> | <a class="edit" id="edit-{@obj[v].id@}">编辑</a> |<a id="del-{@obj[v].id@}" class="del">删除</td></tr>';
 html.pagestring='<tr><td colspan="10" align="right" class="borderTop"><span class="homepages" id="homepages_conf_"><input type="button" value="首 页" class="dhinput"/></span> | <span class="uppages" id="uppages_conf_"><input type="button" value="上一页" class="dhinput"/></span> | <span id="downpages_conf_" class="downpages"><input type="button" value="下一页" class="dhinput"/></span> | <span id="endpages_conf_" class="endpages"><input type="button" value="尾 页" class="dhinput"/></span> 当前第<span id="nowpagenum">{@result.pagenum@}</span>页 每页<span>{@result.pagesize@}</span>条 总共<span id="global_conf_record">{@result.totalrecord@}</span>条记录 共<span id="totalpage">{@result.maxpage@}</span>页 跳转到 <input name="skip" id="skip" class="skip" type="text" value="" style="height:10px; width:30px;" maxlength="3">页<span id="skippages_conf_" class="skippages"><input type="button" value="跳 转" class="dhinput"/></span><span id="pagewhere" style="display:none">{@result.where@}</span><span id="pagetype" style="display:none">ajax</span><span id="classid" style="display:none">{@id@}</span></td></tr>';
 html.errexits='<tr><td colspan="10" class="liststyle" > 很遗憾!你需要的数据不存在或者已经被删除!</td></tr>';
 html.stringmsg ='<tr><td class="liststyle" width="25%" height="30">key</td><td class="liststyle" width="60%">value</td><td class="liststyle" width="15%">操作</td></tr>';

 原创:铜豌豆 http://csq-3.blog.163.com/blog/static/38738439201143114025474/

这样就可以把循环的html代码移到其他地方统一管理...看懂了嘛.哈哈!

好东西你的慢慢看哦!

  评论这张
 
阅读(911)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018