在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 相关文章推荐
图片按比例缩放函数
Jun 26 Javascript
bgsound 背景音乐 的一些常用方法及特殊用法小结
May 11 Javascript
Javascript根据指定下标或对象删除数组元素
Dec 21 Javascript
页面实时更新时间的JS实例代码
Dec 18 Javascript
jquery 操作两个select实现值之间的互相传递
Mar 07 Javascript
JS如何设置cookie有效期为当天24点并弹出欢迎登陆界面
Aug 04 Javascript
js简单获取表单中单选按钮值的方法
Aug 23 Javascript
整理一些最近经常遇到的前端面试题
Apr 25 Javascript
jQuery Position方法使用和兼容性
Aug 23 jQuery
浅谈angular表单提交中ng-submit的默认使用方法
Sep 30 Javascript
微信小程序常用简易小函数总结
Feb 01 Javascript
JS绘图Flot应用图形绘制异常解决方案
Oct 16 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
php设计模式 Composite (组合模式)
2011/06/26 PHP
基于simple_html_dom的使用小结
2013/07/01 PHP
浅析PHP的静态成员函数效率更高的原因
2014/06/13 PHP
在Mac OS上搭建Nginx+PHP+MySQL开发环境的教程
2015/12/21 PHP
javascript中常用编程知识
2013/04/08 Javascript
JavaScript省市联动实现代码
2014/02/15 Javascript
javascript自定义的addClass()方法
2014/05/28 Javascript
JS实现从表格中动态删除指定行的方法
2015/03/31 Javascript
JavaScript正则表达式的分组匹配详解
2016/02/13 Javascript
深入浅出 jQuery中的事件机制
2016/08/23 Javascript
js实现功能比较全面的全选和多选
2017/03/02 Javascript
详解nodejs爬虫程序解决gbk等中文编码问题
2017/04/06 NodeJs
微信小程序实现全局搜索代码高亮的示例
2018/03/30 Javascript
Bootstrap Table实现定时刷新数据的方法
2018/08/13 Javascript
vue中进入详情页记住滚动位置的方法(keep-alive)
2018/09/21 Javascript
一秒学会微信小程序制作table表格
2019/02/14 Javascript
ionic2.0双击返回键退出应用
2019/09/17 Javascript
vue-preview动态获取图片宽高并增加旋转功能的实现
2020/07/29 Javascript
js绘制一条直线并旋转45度
2020/08/21 Javascript
Python入门及进阶笔记 Python 内置函数小结
2014/08/09 Python
python爬虫获取淘宝天猫商品详细参数
2020/06/23 Python
python中break、continue 、exit() 、pass终止循环的区别详解
2019/07/08 Python
Flask配置Cors跨域的实现
2019/07/12 Python
浅谈Django前端后端值传递问题
2020/07/15 Python
Python 如何定义匿名或内联函数
2020/08/01 Python
Python reversed反转序列并生成可迭代对象
2020/10/22 Python
Python新建项目自动添加介绍和utf-8编码的方法
2020/12/26 Python
什么是虚拟内存?虚拟内存有什么优势?
2016/02/09 面试题
高一生物教学反思
2014/01/17 职场文书
行政副总岗位职责
2014/02/23 职场文书
个人担保书范文
2014/05/20 职场文书
假期安全教育广播稿
2014/10/04 职场文书
2015大学生求职信范文
2015/03/20 职场文书
2015年小学教科研工作总结
2015/07/20 职场文书
教务处教学工作总结
2015/08/10 职场文书
MySQL Router实现MySQL的读写分离的方法
2021/05/27 MySQL