在js代码拼接dom对象到页面上的模板总结


Posted in Javascript onOctober 21, 2018

每次在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);
}

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。如果你想了解更多相关内容请查看下面相关链接

Javascript 相关文章推荐
学习面向对象之面向对象的基本概念:对象和其他基本要素
Nov 30 Javascript
js中巧用cssText属性批量操作样式
Mar 13 Javascript
Jquery 表单验证类介绍与实例
Jun 09 Javascript
jquery 实现input输入什么div图层显示什么
Jun 15 Javascript
原生javaScript实现图片延时加载的方法
Dec 22 Javascript
node.js调用C++开发的模块实例
Jul 03 Javascript
Bootstrap源码解读导航条(7)
Dec 23 Javascript
js实现瀑布流效果(自动生成新的内容)
Mar 16 Javascript
AngularJs 禁止模板缓存的方法
Nov 28 Javascript
Angular之toDoList的实现代码示例
Dec 02 Javascript
微信小程序定义和调用全局变量globalData的实现
Nov 01 Javascript
vue实现简单全选和反选功能
Sep 15 Javascript
如何安装控制器JavaScript生成插件详解
Oct 21 #Javascript
Node.js中的不安全跳转如何防御详解
Oct 21 #Javascript
详解Axios 如何取消已发送的请求
Oct 20 #Javascript
使用Vue做一个简单的todo应用的三种方式的示例代码
Oct 20 #Javascript
Iview Table组件中各种组件扩展的使用
Oct 20 #Javascript
详解webpack打包第三方类库的正确姿势
Oct 20 #Javascript
详解ES6 Promise对象then方法链式调用
Oct 20 #Javascript
You might like
phpMyAdmin下载、安装和使用入门教程
2007/05/31 PHP
Smarty保留变量用法分析
2016/05/23 PHP
PHP命名空间与自动加载类详解
2018/09/04 PHP
php 输出缓冲 Output Control用法实例详解
2020/03/03 PHP
setTimeout的延时为0时多个浏览器的区别
2012/05/23 Javascript
改进版通过Json对象实现深复制的方法
2012/10/24 Javascript
jquery 无限级下拉菜单的简单实现代码
2014/02/21 Javascript
用JavaScript实现一个代码简洁、逻辑不复杂的多级树
2014/05/23 Javascript
JS实现自动定时切换的简洁网页选项卡效果
2015/10/13 Javascript
JavaScript的Number对象的toString()方法
2015/12/18 Javascript
jQuery实现的省市联动菜单功能示例【测试可用】
2017/01/13 Javascript
js中编码函数:escape,encodeURI与encodeURIComponent详解
2017/03/21 Javascript
微信小程序实现带刻度尺滑块功能
2017/03/29 Javascript
微信小程序 按钮滑动的实现方法
2017/09/27 Javascript
使用Bootstrap和Vue实现用户信息的编辑删除功能
2017/10/25 Javascript
vue-router两种模式区别及使用注意事项详解
2019/08/01 Javascript
基于vue、react实现倒计时效果
2019/08/26 Javascript
[02:51]DOTA2 2015国际邀请赛中国区预选赛第一日战报
2015/05/27 DOTA
Python实现破解猜数游戏算法示例
2017/09/25 Python
Python内置模块logging用法实例分析
2018/02/12 Python
Python3实现购物车功能
2018/04/18 Python
Python中出现IndentationError:unindent does not match any outer indentation level错误的解决方法
2020/04/18 Python
用Q-learning算法实现自动走迷宫机器人的方法示例
2019/06/03 Python
基于python的socket实现单机五子棋到双人对战
2020/03/24 Python
Python连接HDFS实现文件上传下载及Pandas转换文本文件到CSV操作
2020/06/06 Python
CSS3 3D位移translate效果实例介绍
2016/05/03 HTML / CSS
Linux面试经常问的文件系统操作命令
2015/11/05 面试题
党员实事承诺书
2014/03/26 职场文书
奠基仪式策划方案
2014/05/15 职场文书
刑事撤诉申请书
2015/05/18 职场文书
红色电影观后感
2015/06/18 职场文书
暂住证明怎么写
2015/06/19 职场文书
Python实现8种常用抽样方法
2021/06/27 Python
JavaScript实现简单拖拽效果
2021/09/15 Javascript
opencv深入浅出了解机器学习和深度学习
2022/03/17 Python
CentOS7 minimal 最小化安装网络设置过程
2022/12/24 Servers