在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编程起步(第六课)
Jan 10 Javascript
jQuery 过滤not()与filter()实例代码
May 10 Javascript
JQuery select控件的相关操作实现代码
Sep 14 Javascript
解析jquery获取父窗口的元素
Jun 26 Javascript
js关于精确计算和数值格式化以及直接引js文件
Jan 28 Javascript
浅析node.js中close事件
Nov 26 Javascript
基于jquery实现发送文章到手机的代码
Dec 26 Javascript
jQuery可见性过滤器:hidden和:visibility用法实例
Jun 24 Javascript
JS基于onclick事件实现单个按钮的编辑与保存功能示例
Feb 13 Javascript
jQuery ajax动态生成table功能示例
Jun 14 jQuery
axios的拦截请求与响应方法
Aug 11 Javascript
js prototype和__proto__的关系是什么
Aug 23 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开源项目的源码指南
2014/12/21 PHP
Yii控制器中操作视图js的方法
2016/07/04 PHP
Laravel中基于Artisan View扩展包创建及删除应用视图文件的方法
2016/10/08 PHP
使用tp框架和SQL语句查询数据表中的某字段包含某值
2019/10/18 PHP
Nigma vs AM BO3 第一场2.13
2021/03/10 DOTA
基于JQuery的一句话搞定手风琴菜单
2012/09/14 Javascript
js模拟C#中List的简单实例
2014/03/06 Javascript
angularjs中的单元测试实例
2014/12/06 Javascript
BootStrap文件上传样式超好看【持续更新】
2016/05/10 Javascript
简单实现轮播图效果的实例
2016/07/15 Javascript
微信小程序 参数传递详解
2016/10/24 Javascript
Nodejs实现短信验证码功能
2017/02/09 NodeJs
react router 4.0以上的路由应用详解
2017/09/21 Javascript
create-react-app构建项目慢的解决方法
2018/03/14 Javascript
jQuery实现ajax的嵌套请求案例分析
2019/02/16 jQuery
react写一个select组件的实现代码
2019/04/03 Javascript
实例详解vue中的$root和$parent
2019/04/29 Javascript
LayUi使用switch开关,动态的去控制它是否被启用的方法
2019/09/21 Javascript
Vue-cli3生成的Vue项目加载Mxgraph方法示例
2020/05/31 Javascript
vue addRoutes路由动态加载操作
2020/08/04 Javascript
js实现移动端图片滑块验证功能
2020/09/29 Javascript
[47:55]Ti4第二日主赛事败者组 NaVi vs EG 1
2014/07/20 DOTA
你所不知道的Python奇技淫巧13招【实用】
2016/12/14 Python
Django 导出 Excel 代码的实例详解
2017/08/11 Python
Python3实现爬取指定百度贴吧页面并保存页面数据生成本地文档的方法
2018/04/22 Python
Linux下Python安装完成后使用pip命令的详细教程
2018/11/22 Python
Python生成rsa密钥对操作示例
2019/04/26 Python
python实现微信定时每天和女友发送消息
2019/04/29 Python
python add_argument()用法解析
2020/01/29 Python
ellesse美国官方商店:意大利高级运动服品牌
2019/10/29 全球购物
介绍一下write命令
2014/08/10 面试题
物业经理求职自我评价
2013/09/22 职场文书
高中三年学习生活的自我评价
2013/10/10 职场文书
竞选大队长演讲稿
2014/04/29 职场文书
企业承诺书格式范文
2015/04/28 职场文书
《秋天的怀念》教学反思
2016/02/17 职场文书