在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 相关文章推荐
jquery键盘事件使用介绍
Nov 01 Javascript
js中单引号与双引号冲突问题解决方法
Oct 04 Javascript
使用CSS和jQuery模拟select并附提交后取得数据的代码
Oct 18 Javascript
Javascript定义类(class)的三种方法详解
Mar 13 Javascript
简化版手机端照片预览组件
Apr 13 Javascript
基于jQuery实现以手风琴方式展开和折叠导航菜单
Jan 28 Javascript
JavaScript 经典实例日常收集整理(常用经典)
Mar 30 Javascript
JavaScript严格模式详解
Jan 16 Javascript
jQuery事件与动画基础详解
Feb 23 Javascript
详解vue数据渲染出现闪烁问题
Jun 29 Javascript
AngularJS中下拉框的高级用法示例
Oct 11 Javascript
JavaScript 中的六种循环方法
Jan 06 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
浅析Yii中使用RBAC的完全指南(用户角色权限控制)
2013/06/20 PHP
PHP采集类Snoopy抓取图片实例
2014/06/19 PHP
php出现web系统多域名登录失败的解决方法
2014/09/30 PHP
Laravel框架分页实现方法分析
2018/06/12 PHP
初试jQuery EasyUI 使用介绍
2010/04/01 Javascript
Jquery下attr和removeAttr的使用方法
2010/12/28 Javascript
jQuery实现仿百度首页滑动伸缩展开的添加服务效果代码
2015/09/09 Javascript
javascript运动效果实例总结(放大缩小、滑动淡入、滚动)
2016/01/08 Javascript
浅析jQuery中使用$所引发的问题
2016/05/29 Javascript
vue 中swiper的使用教程
2018/05/22 Javascript
vue监听对象及对象属性问题
2018/08/20 Javascript
Layui数据表格 前后端json数据接收的方法
2019/09/19 Javascript
Vue包大小优化的实现(从1.72M到94K)
2021/02/18 Vue.js
Python基于贪心算法解决背包问题示例
2017/11/27 Python
Django使用HttpResponse返回图片并显示的方法
2018/05/22 Python
Pycharm 设置自定义背景颜色的图文教程
2018/05/23 Python
用Python一键搭建Http服务器的方法
2018/06/01 Python
python 使用re.search()筛选后 选取部分结果的方法
2018/11/28 Python
Python编写合并字典并实现敏感目录的小脚本
2019/02/26 Python
Python中函数参数匹配模型详解
2019/06/09 Python
解决python xx.py文件点击完之后一闪而过的问题
2019/06/24 Python
Python SSL证书验证问题解决方案
2020/01/13 Python
英国家电直销:Appliances Direct
2016/09/22 全球购物
美国最大的骑马用品零售商:HorseLoverZ
2017/01/12 全球购物
香港网上花店:FlowerAdvisor香港
2019/05/30 全球购物
什么是类的返射机制
2016/02/06 面试题
毕业生文员求职信
2013/11/03 职场文书
JAVA程序员自荐书
2014/01/30 职场文书
中国文明网向国旗敬礼寄语大全
2014/09/27 职场文书
2014年连锁店圣诞节活动方案
2014/12/09 职场文书
实习护士自荐信
2015/03/25 职场文书
运动会闭幕式通讯稿
2015/07/18 职场文书
家长会后的感想
2015/08/11 职场文书
日本读研:怎样写好一篇日本研究计划书?
2019/07/15 职场文书
vue首次渲染全过程
2021/04/21 Vue.js
JavaWeb 入门:Hello Servlet
2021/07/16 Java/Android