在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 相关文章推荐
解放web程序员的输入验证
Oct 06 Javascript
Opacity.js
Jan 22 Javascript
javaScript 利用闭包模拟对象的私有属性
Dec 29 Javascript
图片延迟加载的实现代码(模仿懒惰)
Mar 29 Javascript
利用js读取动态网站从服务器端返回的数据
Feb 10 Javascript
JavaScript中的Truthy和Falsy介绍
Jan 01 Javascript
js实现把图片的绝对路径转为base64字符串、blob对象再上传
Dec 29 Javascript
JavaScript实现自定义媒体播放器方法介绍
Jan 03 Javascript
使用bootstrap实现下拉框搜索功能的实例讲解
Aug 10 Javascript
Bootstrap导航菜单点击后无法自动添加active的处理方法
Aug 10 Javascript
基于Express框架使用POST传递Form数据
Aug 10 Javascript
JS实现旋转木马轮播图
Jan 01 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导出excel格式数据问题
2014/03/11 PHP
使用php方法curl抓取AJAX异步内容思路分析及代码分享
2014/08/25 PHP
php修改上传图片尺寸的方法
2015/04/14 PHP
CodeIgniter基于Email类发邮件的方法
2016/03/29 PHP
Smarty模板变量与调节器实例详解
2019/07/20 PHP
来自国外的页面JavaScript文件优化
2010/12/08 Javascript
事件绑定之小测试  onclick &amp;&amp; addEventListener
2011/07/31 Javascript
js文件缓存之版本管理详解
2013/07/05 Javascript
js实现动态添加、删除行、onkeyup表格求和示例
2013/08/18 Javascript
js跑步算法的实现代码
2013/12/04 Javascript
jquery live()重复绑定的解决方法介绍
2014/01/03 Javascript
JQuery实现当鼠标停留在某区域3秒后自动执行
2014/09/09 Javascript
JS实现的4种数字千位符格式化方法分享
2015/03/02 Javascript
jQuery实现图片局部放大镜效果
2016/03/17 Javascript
基于JS脚本语言的基础语法详解
2017/07/22 Javascript
Vue单文件组件的如何使用方式介绍
2017/07/28 Javascript
vue-awesome-swiper 基于vue实现h5滑动翻页效果【推荐】
2018/11/08 Javascript
vue发送websocket请求和http post请求的实例代码
2019/07/11 Javascript
Python3.x和Python2.x的区别介绍
2013/02/12 Python
Python中pip安装非PyPI官网第三方库的方法
2015/06/02 Python
简单了解Python中的几种函数
2017/11/03 Python
Python实现重建二叉树的三种方法详解
2018/06/23 Python
Django框架的使用教程路由请求响应的方法
2018/07/03 Python
python 数据提取及拆分的实现代码
2019/08/26 Python
Python中filter与lambda的结合使用详解
2019/12/24 Python
Python timeit模块原理及使用方法
2020/10/10 Python
anaconda升级sklearn版本的实现方法
2021/02/22 Python
收集的22款给力的HTML5和CSS3帮助工具
2012/09/14 HTML / CSS
CSS3中Animation属性的使用详解
2015/08/06 HTML / CSS
英国领先的在线高尔夫设备零售商:Golfgeardirect
2020/12/11 全球购物
介绍下WebSphere的安全性
2013/01/31 面试题
公司司机岗位职责
2014/02/07 职场文书
高中军训感想300字
2014/03/04 职场文书
殡葬服务心得体会
2014/09/11 职场文书
优秀共产党员推荐材料
2014/12/18 职场文书
2016年“节能宣传周”活动总结
2016/04/05 职场文书