在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 字符串连接[性能比较]
May 10 Javascript
jQuery插件开发基础简单介绍
Jan 07 Javascript
JavaScript生成GUID的多种算法小结
Aug 18 Javascript
一个js导致的jquery失效问题的解决方法
Nov 27 Javascript
js清除input中type等于file的值域(示例代码)
Dec 24 Javascript
node.js中的fs.appendFileSync方法使用说明
Dec 17 Javascript
JavaScript实现同步于本地时间的动态时间显示方法
Feb 02 Javascript
快速掌握Node.js环境的安装与运行方法
Feb 16 Javascript
使用D3.js制作图表详解
Aug 13 Javascript
JS设计模式之策略模式概念与用法分析
Feb 05 Javascript
vue输入框使用模糊搜索功能的实现代码
May 26 Javascript
gojs实现蚂蚁线动画效果
Feb 18 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
PHILIPS D1835/D1875的电路分析与打理
2021/03/02 无线电
PHP配置文件中最常用四个ini函数
2007/03/19 PHP
PHP 身份证号验证函数
2009/05/07 PHP
DedeCMS 核心类TypeLink.class.php摘要笔记
2010/04/07 PHP
PHP中的session永不过期的解决思路及实现方法分享
2011/04/20 PHP
hadoop中一些常用的命令介绍
2013/06/19 PHP
如何使用PHP批量去除文件UTF8 BOM信息
2013/08/05 PHP
PHP+Apache环境中如何隐藏Apache版本
2017/11/24 PHP
漂亮的widgets,支持换肤和后期开发新皮肤
2007/04/23 Javascript
JavaScript 面向对象的 私有成员和公开成员
2010/05/13 Javascript
读JavaScript DOM编程艺术笔记
2011/11/15 Javascript
jQuery编辑器KindEditor4.1.4代码高亮显示设置教程
2013/03/01 Javascript
Textarea根据内容自适应高度
2013/10/28 Javascript
js实现日期级联效果
2014/01/23 Javascript
JsRender for object语法简介
2014/10/31 Javascript
Javascript中的apply()方法浅析
2015/03/15 Javascript
Nodejs学习笔记之入门篇
2015/04/16 NodeJs
学习JavaScript鼠标响应事件
2015/12/25 Javascript
jQuery基于$.ajax设置移动端click超时处理方法
2016/05/14 Javascript
微信小程序 购物车简单实例
2016/10/24 Javascript
微信小程序购物车、父子组件传值及calc的注意事项总结
2018/11/14 Javascript
深入了解JavaScript 的 WebAssembly
2019/06/15 Javascript
使用JS实现鼠标放上图片进行放大离开实现缩小功能
2021/01/27 Javascript
在Python中使用列表生成式的教程
2015/04/27 Python
python编写弹球游戏的实现代码
2018/03/12 Python
Python实现购物车程序
2018/04/16 Python
Python实现的远程登录windows系统功能示例
2018/06/21 Python
Python如何用filter函数筛选数据
2020/03/05 Python
Nginx+Uwsgi+Django 项目部署到服务器的思路详解
2020/05/08 Python
Skyscanner香港:机票比价, 平机票和廉价航空机票预订
2020/02/07 全球购物
java程序员面试交流
2012/11/29 面试题
DELPHI面试题研发笔试试卷
2015/11/08 面试题
廉政教育心得体会
2014/01/01 职场文书
心理健康日活动总结
2014/05/08 职场文书
浅谈PHP7中的一些小技巧
2021/05/29 PHP
mybatis中sql语句CDATA标签的用法说明
2021/06/30 Java/Android