在js代码拼接dom对象到页面上去的模板总结(必看)


Posted in Javascript onFebruary 14, 2017

每次在js代码里面想动态的拼个dom,然后append到页面上,都是各种麻烦,

要是可以直接在jsp页面弄个隐藏的model那是很好的,用js方法里面的clone方法也是很好的,还可以给不同部分set值。

为了以后简单点,我就把模板摆着,方便后面用得着的时候,复制粘贴。

function fillDialog(dataArray) {
  var target = $("#dialogTarget");
  target.empty();
  for (var i = 0; i < dataArray.length; i++) {
    var label = $('<label class="control-label" style="width: auto; text-align: left;"></label>');
    label.text("" + dataArray[i].channelName);
    var input = $("<input type=\"text\"/>");
    input.prop("name", "checkbox");
    input.prop("type", "checkbox");
    input.prop("value", dataArray[i].id);
    if (dataArray[i].showInUserStatistic) {
      input.prop("checked", "true");
    }
    label.prepend(input);
    target.append(label);
  }
}
var trs = "";
  for (var i = 0; i < dataArray.length; i++) {
    var branchBank = dataArray[i].branch;
    var newUser = dataArray[i].newUserNum;
    var netBoostUser = dataArray[i].netBoostUserNum;
    var closeUser = dataArray[i].closeUserNum;
    var activeUser = dataArray[i].activeUserNum;
    var index = activeUser.indexOf(".");
    if (index > 0) {
      //去分行活跃用户数的小数部分如:11.0 ---> 11
      activeUser = activeUser.substring(0, index);
    }
    trs += "<tr><td title='" + branchBank + "'>" + branchBank + "</td>";
    trs += "<td title='" + newUser + "'>" + newUser + "</td>";
    trs += "<td title='" + netBoostUser + "'>" + netBoostUser + "</td>";
    trs += "<td title='" + closeUser + "'>" + closeUser + "</td>";
    trs += "<td title='" + activeUser + "'>" + activeUser + "</td>";
    trs += "</tr>";
  }
  newList.append("<tbody>" + trs + "</tbody>");
  tableChart.append(newList.show());

 var $metric = $("#metric");
 $metric.empty();
 var optGroup0 = $("<optgroup label='常用指标'>");
 var optGroup1 = $("<optgroup label='不常用指标'>");
 var optGroup2 = $("<optgroup label='未分组指标'>");

 for(var i=0; i<allMetricSources.length; i++) {
   var m = allMetricSources[i];
   if( m != null && (m.type == stream_type || m.type == 2)){
  var option = $("<option ></option>");
  option.attr("value", m.metric);
  option.attr("data_type", m.data_type);
  option.attr("unit", m.unit);
  option.html(m.title);
  if (m.groupType == 0) {
  optGroup0.append(option);
  } else if (m.groupType == 1) {
  optGroup1.append(option);
  } else {
  optGroup2.append(option);
  }
   }
  }
 $metric.append(optGroup0);
 $metric.append(optGroup1);
 $metric.append(optGroup2);
  if(metric != undefined){
 $metric.val(metric);
  }
 $metric.trigger("chosen:updated");

function fillRecoveryTable(data) {
  var $tableBody = $("#recoveryTable").find("tbody");
  $tableBody.empty();
  var trs = "";
  for (var i = 0; i < data.length; i++) {
    var recovery = data[i];
    trs += "<tr><td >" + recovery.fileName + "</td>";
    trs += "<td >" + recovery.timeString + "</td>";
    trs += "<td >" + (recovery.result ? "成功" : "失败") + "</td>";
    trs += "<td >" +
      "<a onclick=\"removeRecovery('" + recovery.id + "');\" class=\"icon-trash option\" title=\"删除\"></a>" +
      "<a onclick=\"doRecovery('" + recovery.id + "');\" class=\"icon-cog option\" title=\"一键恢复\" ></a></td>";
    trs += "</tr>";
  }
  $tableBody.append(trs);
}

以上这篇在js代码拼接dom对象到页面上去的模板总结(必看)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery 使用手册(二)
Sep 23 Javascript
jquery photoFrame 图片边框美化显示插件
Jun 28 Javascript
一行代码告别document.getElementById
Jun 01 Javascript
firefox下jQuery UI Autocomplete 1.8.*中文输入修正方法
Sep 19 Javascript
javascript实现显示和隐藏div方法汇总
Aug 14 Javascript
比较常见的javascript中定义函数的区别
Nov 09 Javascript
基于JavaScript短信验证码如何实现
Jan 24 Javascript
JavaScript中setTimeout和setInterval函数的传参及调用
Mar 11 Javascript
JS提示:Uncaught SyntaxError:Unexpected token ) 错误的解决方法
Aug 19 Javascript
Node.js中用D3.js的方法示例
Jan 16 Javascript
webpack打包并将文件加载到指定的位置方法
Feb 22 Javascript
react 兄弟组件如何调用对方的方法示例
Oct 23 Javascript
jquery封装插件时匿名函数形参和实参的写法解释
Feb 14 #Javascript
js实现数组去重方法及效率?Ρ? target=
Feb 14 #Javascript
jQuery实现Table表格隔行变色及高亮显示当前选择行效果示例
Feb 14 #Javascript
微信小程序小组件 基于Canvas实现直播点赞气泡效果
May 29 #Javascript
Bootstrap中data-target 到底是什么
Feb 14 #Javascript
详解JS: reduce方法实现 webpack多文件入口
Feb 14 #Javascript
如何快速上手Vuex
Feb 14 #Javascript
You might like
php5 pdo新改动加载注意事项
2008/09/11 PHP
php 引用(&amp;)详解
2009/11/20 PHP
php绘图之加载外部图片的方法
2015/01/24 PHP
Eclipse PHPEclipse 配置的具体步骤
2017/08/08 PHP
JQuery扩展插件Validate—6 radio、checkbox、select的验证
2011/09/05 Javascript
node.js中的path.join方法使用说明
2014/12/08 Javascript
Jquery动态替换div内容及动态展示的方法
2015/01/23 Javascript
js基础之DOM中document对象的常用属性方法详解
2016/10/28 Javascript
浅谈Vue.js 1.x 和 2.x 实例的生命周期
2017/07/25 Javascript
js封装成插件的步骤方法
2017/09/11 Javascript
单页面vue引入百度统计的使用方法示例详解
2018/10/13 Javascript
微信小程序搭建自己的Https服务器
2019/05/02 Javascript
微信小程序 弹窗输入组件的实现解析
2019/08/12 Javascript
[00:12]2018DOTA2亚洲邀请赛 sylar表现SOLO技艺
2018/04/06 DOTA
python服务器端收发请求的实现代码
2014/09/29 Python
Python函数可变参数定义及其参数传递方式实例详解
2015/05/25 Python
Python设计模式之命令模式简单示例
2018/01/10 Python
python清除函数占用的内存方法
2018/06/25 Python
django-allauth入门学习和使用详解
2019/07/03 Python
python3 线性回归验证方法
2019/07/09 Python
Python Request爬取seo.chinaz.com百度权重网站的查询结果过程解析
2019/08/13 Python
python构造函数init实例方法解析
2020/01/19 Python
Python制作简易版小工具之计算天数的实现思路
2020/02/13 Python
Python如何使用PIL Image制作GIF图片
2020/05/16 Python
通过代码实例了解Python sys模块
2020/09/14 Python
美体小铺加拿大官方网站:The Body Shop加拿大
2016/10/30 全球购物
Superdry瑞典官网:英国日本街头风品牌
2017/05/17 全球购物
印尼披萨外送专家:Domino’s Pizza印尼
2017/12/28 全球购物
专业销售业务员求职信
2013/11/18 职场文书
经销商会议欢迎词
2014/01/11 职场文书
上班离岗检讨书
2014/01/27 职场文书
客服部工作职责范本
2014/02/14 职场文书
《闻一多先生的说和做》教学反思
2014/04/28 职场文书
数控专业毕业生求职信
2014/06/12 职场文书
四风问题班子对照检查材料
2014/09/27 职场文书
教师年度个人总结
2015/02/11 职场文书