在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 相关文章推荐
在线编辑器的实现原理(兼容IE和FireFox)
Mar 09 Javascript
js以对象为索引的关联数组
Jul 04 Javascript
JavaScript中的console.group()函数详细介绍
Dec 29 Javascript
使用JavaScript实现旋转的彩圈特效
Jun 23 Javascript
JS模拟Dialog弹出浮动框效果代码
Oct 16 Javascript
ajax在兼容模式下失效的快速解决方法
Mar 22 Javascript
jquery操作ID带有变量的节点实例
Dec 07 Javascript
微信小程序 input输入框控件详解及实例(多种示例)
Dec 14 Javascript
Vue.js弹出模态框组件开发的示例代码
Jul 26 Javascript
vue2.0实现移动端的输入框实时检索更新列表功能
May 08 Javascript
微信小程序修改checkbox的样式代码实例
Jan 21 Javascript
Vue实现简单的留言板
Oct 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 MYSQL中插入当前时间
2008/04/06 PHP
php中文验证码实现示例分享
2014/01/12 PHP
php时间计算相关问题小结
2016/05/09 PHP
WordPress中设置Post Type自定义文章类型的实例教程
2016/05/10 PHP
利用PHPStorm如何开发Laravel应用详解
2017/08/30 PHP
php strftime函数获取日期时间(switch用法)
2018/05/16 PHP
Javascript 静态页面实现随机显示广告的办法
2010/11/17 Javascript
JQuery异步加载无限下拉框级联功能实现示例
2014/02/19 Javascript
jQuery+css3实现转动的正方形效果(附demo源码下载)
2016/01/27 Javascript
详解JavaScript中的事件流和事件处理程序
2016/05/20 Javascript
vue中使用better-scroll实现滑动效果及注意事项
2018/11/15 Javascript
详解vue2.0模拟后台json数据
2019/05/16 Javascript
解决vue elementUI中table里数字、字母、中文混合排序问题
2020/01/07 Javascript
微信浏览器下拉黑边解决方案 wScroollFix
2020/01/21 Javascript
js中火星坐标、百度坐标、WGS84坐标转换实现方法示例
2020/03/02 Javascript
vue实现购物车结算功能
2020/06/18 Javascript
JS删除对象中某一属性案例详解
2020/09/08 Javascript
[51:32]Optic vs Serenity 2018国际邀请赛淘汰赛BO3 第一场 8.22
2018/08/23 DOTA
[05:31]干嘛呢兄弟!DOTA2 TI9语音轮盘部分出处
2019/05/14 DOTA
python连接oracle数据库实例
2014/10/17 Python
python中Genarator函数用法分析
2015/04/08 Python
Python 自动刷博客浏览量实例代码
2017/06/14 Python
浅谈Python peewee 使用经验
2017/10/20 Python
Python+OpenCV图片局部区域像素值处理改进版详解
2019/01/23 Python
python 用 xlwings 库 生成图表的操作方法
2019/12/22 Python
Python3运算符常见用法分析
2020/02/14 Python
Python 读取WAV音频文件 画频谱的实例
2020/03/14 Python
将不规则的Python多维数组拉平到一维的方法实现
2021/01/11 Python
HTML5逐步分析实现拖放功能的方法
2020/09/30 HTML / CSS
音乐系毕业生自荐信
2013/10/27 职场文书
机械设计专业应届生求职信
2013/11/21 职场文书
餐饮营销方案
2014/02/23 职场文书
公司寄语大全
2014/04/10 职场文书
个人总结与自我评价
2014/09/18 职场文书
浅析Python中的套接字编程
2021/06/22 Python
Windows Server 2012 R2 磁盘分区教程
2022/04/29 Servers