在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实现动态增加文件域表单
Feb 12 Javascript
javascript getElementsByClassName实现代码
Oct 11 Javascript
js跨浏览器实现将字符串转化为xml对象的方法
Sep 25 Javascript
JavaScript实现两个Table固定表头根据页面大小自行调整
Jan 03 Javascript
JavaScript函数详解
Feb 27 Javascript
jquery+ajax请求且带返回值的代码
Aug 12 Javascript
分步解析JavaScript实现tab选项卡自动切换功能
Jan 25 Javascript
jQuery基础的工厂函数以及定时器的经典实例分析
May 20 Javascript
重新理解JavaScript的六种继承方式
Mar 24 Javascript
vue项目中应用ueditor自定义上传按钮功能
Apr 27 Javascript
cdn模式下vue的基本用法详解
Oct 07 Javascript
JS中超越现实的匿名函数用法实例分析
Jun 21 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快速url重写 更新版[需php 5.30以上]
2010/04/20 PHP
php中substr()函数参数说明及用法实例
2014/11/15 PHP
PHP模拟asp.net的StringBuilder类实现方法
2015/08/08 PHP
PHP传值到不同页面的三种常见方式及php和html之间传值问题
2015/11/19 PHP
PHP实现链式操作的原理详解
2016/09/16 PHP
php 伪造HTTP_REFERER页面URL来源的三种方法
2016/09/22 PHP
php+mysql查询实现无限下级分类树输出示例
2016/10/03 PHP
在Laravel 中实现是否关注的示例
2019/10/22 PHP
php输出形式实例整理
2020/05/05 PHP
js DOM的学习笔记
2011/12/22 Javascript
一个页面元素appendchild追加到另一个页面元素的问题
2013/01/27 Javascript
ComboBox 和 DateField 在IE下消失的解决方法
2013/08/30 Javascript
JS实现的图片选择顺序切换和循环切换功能示例【测试可用】
2018/12/28 Javascript
在Vue项目中取消ESLint代码检测的步骤讲解
2019/01/27 Javascript
前端vue-cli项目中使用img图片和background背景图的几种方法
2019/11/13 Javascript
python读文件逐行处理的示例代码分享
2013/12/27 Python
利用Python和OpenCV库将URL转换为OpenCV格式的方法
2015/03/27 Python
Python中的urllib模块使用详解
2015/07/07 Python
详解python中index()、find()方法
2019/08/29 Python
tensorflow实现二维平面模拟三维数据教程
2020/02/11 Python
Python3.7 读取音频根据文件名生成脚本的代码
2020/04/07 Python
详解Python3 定义一个跨越多行的字符串的多种方法
2020/09/06 Python
深入浅析pycharm中 Make available to all projects的含义
2020/09/15 Python
python爬虫---requests库的用法详解
2020/09/28 Python
python 获取字典键值对的实现
2020/11/12 Python
Myprotein蛋白粉美国官网:欧洲畅销运动营养品牌
2016/11/15 全球购物
Stefania Mode美国:奢华设计师和时尚服装
2018/01/07 全球购物
台湾最大网路书店:博客来
2018/03/18 全球购物
施华洛世奇巴西官网:SWAROVSKI巴西
2019/12/03 全球购物
音乐教学反思
2014/02/02 职场文书
致100米运动员广播稿
2014/02/14 职场文书
村党支部群众路线教育实践活动对照检查材料
2014/09/26 职场文书
教师党员批评与自我批评
2014/10/15 职场文书
2015年店长个人工作总结
2015/10/23 职场文书
详解Apache SkyWalking 告警配置指南
2021/04/22 Servers
node.js如何自定义实现一个EventEmitter
2021/07/16 Javascript