在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 相关文章推荐
javascript中的作用域和上下文使用简要概述
Dec 05 Javascript
jQuery1.9.1针对checkbox的调整方法(prop)
May 01 Javascript
jquery插件star-rating.js实现星级评分特效
Apr 15 Javascript
jQuery实现自动与手动切换的滚动新闻特效代码分享
Aug 27 Javascript
基于jQuery实现鼠标点击导航菜单水波动画效果附源码下载
Jan 06 Javascript
深入浅析knockout源码分析之订阅
Jul 12 Javascript
详细谈谈AngularJS的子级作用域问题
Sep 05 Javascript
Angular4学习笔记router的简单使用
Mar 30 Javascript
微信小程序实现slideUp、slideDown滑动效果及点击空白隐藏功能示例
Dec 11 Javascript
浅谈redux, koa, express 中间件实现对比解析
May 23 Javascript
windows实现npm和cnpm安装步骤
Oct 24 Javascript
解决Vue使用bus总线时,第一次路由跳转时数据没成功传递问题
Jul 28 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
php下使用SMTP发邮件的代码
2008/01/10 PHP
Mysql和网页显示乱码解决方法集锦
2008/03/27 PHP
PHP 强制性文件下载功能的函数代码(任意文件格式)
2010/05/26 PHP
探讨:如何使用PHP实现计算两个日期间隔的年、月、周、日数
2013/06/13 PHP
yii分页组件用法实例分析
2015/12/28 PHP
PHP下载大文件失败并限制下载速度的实例代码
2019/05/10 PHP
php curl操作API接口类完整示例
2019/05/21 PHP
Yii Framework框架使用PHPExcel组件的方法示例
2019/07/24 PHP
js自动生成的元素与页面原有元素发生堆叠的解决方法
2013/10/24 Javascript
JavaScript window.location对象
2014/11/14 Javascript
深入解析JavaScript的闭包机制
2015/10/20 Javascript
Nodejs的express使用教程
2015/11/23 NodeJs
浅析javascript的return语句
2015/12/15 Javascript
jQuery中delegate()方法的用法详解
2016/10/13 Javascript
vue.js初学入门教程(1)
2016/11/03 Javascript
JavaScript 过滤关键字
2017/03/20 Javascript
基于vuejs实现一个todolist项目
2017/04/11 Javascript
Javascript ES6中数据类型Symbol的使用详解
2017/05/02 Javascript
JavaScript 获取元素在父节点中的下标(推荐)
2017/06/28 Javascript
Vue之mixin全局的用法详解
2018/08/22 Javascript
js中位运算的运用实例分析
2018/12/11 Javascript
jQuery实现checkbox全选、反选及删除等操作的方法详解
2019/08/02 jQuery
Python 使用PIL中的resize进行缩放的实例讲解
2018/08/03 Python
Python 给屏幕打印信息加上颜色的实现方法
2019/04/24 Python
解决django框架model中外键不落实到数据库问题
2020/05/20 Python
keras:model.compile损失函数的用法
2020/07/01 Python
用python实现前向分词最大匹配算法的示例代码
2020/08/06 Python
Python paramiko使用方法代码汇总
2020/11/20 Python
美国领先的医疗警报服务:Philips Lifeline
2018/03/12 全球购物
一套.net面试题及答案
2016/11/02 面试题
应届大学生自荐信格式
2013/09/21 职场文书
银行员工职业规划范文
2014/01/21 职场文书
上班看电影检讨书
2014/02/12 职场文书
2019暑假学生安全口号
2019/06/27 职场文书
Java实现二分搜索树的示例代码
2022/03/17 Java/Android
SQL Server一个字符串拆分多行显示或者多行数据合并成一个字符串
2022/05/25 SQL Server