• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >JavaScript > 在js代码拼接dom对象到页面上去的模板总结(必看)

在js代码拼接dom对象到页面上去的模板总结(必看)

作者: 字体:[增加 减小] 来源:互联网 时间:2017-05-11

通过本文主要向大家介绍了js dom对象,js获取dom对象,js中dom对象,js dom操作,js dom 参考手册等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

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

以上这篇在js代码拼接dom对象到页面上去的模板总结(必看)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

</div>
分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • js中的DOM模拟购物车功能
  • 在js代码拼接dom对象到页面上去的模板总结(必看)
  • js 数据存储和DOM编程

相关文章

  • 2017-05-11JavaScript实现水平进度条拖拽效果
  • 2017-05-11javascript 中设置window.location.href跳转无效问题解决办法
  • 2017-05-11js仿小米手机上下滑动效果
  • 2017-05-11使用Promise链式调用解决多个异步回调的问题
  • 2017-05-11JS实现简易刻度时钟示例代码
  • 2017-05-11jQuery插件HighCharts实现气泡图效果示例【附demo源码】
  • 2017-05-11ionic2 tabs 图标自定义实例
  • 2017-05-11微信小程序侧边栏滑动特效(左右滑动)
  • 2017-05-11JavaScript原生节点操作小结
  • 2017-05-11正则验证小数点后面只能有两位数的方法

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • JS设置CSS样式的方式汇总
    • 微信小程序 常见问题总结(4058,40013)及解决办法
    • js实现用户输入的小写字母自动转大写字母的方法
    • bootstrap为水平排列的表单和内联表单设置可选的图标
    • jquery 实现复选框的全选操作实例代码
    • jQuery Ajax实现跨域请求
    • jquery选择器
    • 详解AngularJS通过ocLazyLoad实现动态(懒)加载模块和依赖
    • 利用n工具轻松管理Node.js的版本
    • 从零学习node.js之文件操作(三)

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有