在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 相关文章推荐
一些有关检查数据的JS代码
Sep 07 Javascript
JavaScript中的函数嵌套使用
Jun 04 Javascript
JavaScript中的anchor()方法使用详解
Jun 08 Javascript
使用vue实现点击按钮滑出面板的实现代码
Jan 10 Javascript
深入理解Vue.js源码之事件机制
Sep 27 Javascript
Vue的实例、生命周期与Vue脚手架(vue-cli)实例详解
Dec 27 Javascript
js判断文件类型大小并给出提示的实现方法
Jan 03 Javascript
vue引入js数字小键盘的实现代码
May 14 Javascript
深入学习JavaScript 高阶函数
Jun 11 Javascript
es6 super关键字的理解与应用实例分析
Feb 15 Javascript
如何利用JavaScript编写更好的条件语句详解
Aug 10 Javascript
Vue时间轴 vue-light-timeline的用法说明
Oct 29 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 session 预定义数组
2009/03/16 PHP
php for 循环语句使用方法详细说明
2010/05/09 PHP
PHP加密扩展库Mcrypt安装和实例
2013/11/10 PHP
Smarty中常用变量操作符汇总
2014/10/27 PHP
PHP嵌套输出缓冲代码实例
2015/05/12 PHP
PHP书写格式详解(必看)
2016/05/23 PHP
php base64 编码与解码实例代码
2017/03/21 PHP
javascript中parentNode,childNodes,children的应用详解
2013/12/17 Javascript
JS辨别访问浏览器判断是android还是ios系统
2014/08/19 Javascript
字符串反转_JavaScript
2016/04/28 Javascript
再次谈论Javascript中的this
2016/06/23 Javascript
用JS实现图片轮播效果代码(一)
2016/06/26 Javascript
EasyUI 中combotree 默认不能选择父节点的实现方法
2016/11/07 Javascript
Javascript实现信息滚动效果
2017/05/18 Javascript
JavaScript队列函数和异步执行详解
2017/06/19 Javascript
AngularJS中controller控制器继承的使用方法
2017/11/03 Javascript
JS实现标签滚动切换效果
2017/12/25 Javascript
Vue中使用vue-i18插件实现多语言切换功能
2018/04/25 Javascript
详解Vue组件之作用域插槽
2018/11/22 Javascript
详解webpack编译速度提升之DllPlugin
2019/02/05 Javascript
layui table 列宽百分比显示的实现方法
2019/09/28 Javascript
vue 通过 Prop 向子组件传递数据的实现方法
2020/10/30 Javascript
Python字符转换
2008/09/06 Python
python 切片和range()用法说明
2013/03/24 Python
Python跳出循环语句continue与break的区别
2014/08/25 Python
pandas对dataFrame中某一个列的数据进行处理的方法
2019/07/08 Python
Python使用__new__()方法为对象分配内存及返回对象的引用示例
2019/09/20 Python
PYcharm 激活方法(推荐)
2020/03/23 Python
基于python requests selenium爬取excel vba过程解析
2020/08/12 Python
python 多线程共享全局变量的优劣
2020/09/24 Python
Holland & Barrett爱尔兰:英国领先的健康零售商
2019/03/31 全球购物
教师自我鉴定范文
2013/11/10 职场文书
行政专员岗位职责
2014/01/02 职场文书
2014年就业工作总结
2014/11/26 职场文书
2015年九一八事变纪念活动实施方案
2015/05/06 职场文书
nginx 配置缓存
2022/05/11 Servers