在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的跨域传输数据(JSONP)
Mar 10 Javascript
Event altKey,ctrlKey,shiftKey属性解析
Dec 18 Javascript
Node.js 应用跑得更快 10 个技巧
Apr 03 Javascript
使用jQuery实现Web页面换肤功能的要点解析
May 12 Javascript
BootStrop前端框架入门教程详解
Dec 25 Javascript
详解如何使用webpack在vue项目中写jsx语法
Nov 08 Javascript
vue中实现滚动加载更多的示例
Nov 08 Javascript
简单的Vue SSR的示例代码
Jan 12 Javascript
WEEX环境搭建与入门详解
Oct 16 Javascript
微信小程序图片自适应实现解析
Jan 21 Javascript
WebStorm无法正确识别Vue3组合式API的解决方案
Feb 18 Vue.js
AngularJS实现多级下拉框
Mar 25 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自动给网址加上链接的方法
2015/06/02 PHP
WordPress中&quot;无法将上传的文件移动至&quot;错误的解决方法
2015/07/01 PHP
PHP PDO和消息队列的个人理解与应用实例分析
2019/11/25 PHP
高亮显示web页表格行的javascript代码
2010/11/19 Javascript
jQuery判断iframe中元素是否存在的方法
2013/05/11 Javascript
js showModalDialog 弹出对话框的简单实例(子窗体)
2014/01/07 Javascript
简单纯js实现点击切换TAB标签实例
2015/08/23 Javascript
微信小程序 参数传递详解
2016/10/24 Javascript
jQuery实现腾讯信用界面(自制刻度尺)样式
2017/08/15 jQuery
安装Node.js并启动本地服务的操作教程
2018/05/12 Javascript
JavaScript 中的12种循环遍历方法【总结】
2018/05/31 Javascript
webpack手动配置React开发环境的步骤
2018/07/02 Javascript
浅谈Express.js解析Post数据类型的正确姿势
2019/05/30 Javascript
JS实现旋转木马轮播图
2020/01/01 Javascript
js实现移动端图片滑块验证功能
2020/09/29 Javascript
[01:28:56]2014 DOTA2华西杯精英邀请赛 5 24 CIS VS DK
2014/05/26 DOTA
[36:20]KG vs SECRET 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
跟老齐学Python之变量和参数
2014/10/10 Python
python简单实现基于SSL的IRC bot实例
2015/06/15 Python
Python打造出适合自己的定制化Eclipse IDE
2016/03/02 Python
为什么选择python编程语言入门黑客攻防 给你几个理由!
2018/02/02 Python
Django权限机制实现代码详解
2018/02/05 Python
利用python list完成最简单的DB连接池方法
2019/08/09 Python
python 列表、字典和集合的添加和删除操作
2019/12/16 Python
python如何查看网页代码
2020/06/07 Python
Python根据字典的值查询出对应的键的方法
2020/09/30 Python
杭州联环马网络笔试题面试题
2013/08/04 面试题
平面设计师工作职责范文
2013/12/03 职场文书
个人作风剖析材料
2014/02/02 职场文书
巾帼文明岗申报材料
2014/05/01 职场文书
街道务虚会发言材料
2014/10/20 职场文书
2014年电厂个人工作总结
2014/11/27 职场文书
党校学习党性分析材料
2014/12/19 职场文书
用 Python 元类的特性实现 ORM 框架
2021/05/19 Python
Mysql数据库手动及定时备份步骤
2021/11/07 MySQL
Python字符串常规操作小结
2022/04/03 Python