需求:

组织部中有个这样的需求,根据年份动态显示该年份下的定性指标!

我的做法:

先是放一个空的div,让后根据指标的数据,动态的往div中添加元素。

代码:

空的div,存放定性指标

  1. <div id="DvelopmentTarget">     </div>
<div id="DvelopmentTarget">     </div>

动态往div中添加元素:

  1. for (var n = 0; n < data.length; n++)
  2. {
  3. //获取div
  4. var div = document.getElementById("DvelopmentTarget");
  5. //换行
  6. var br = document.createElement("br");
  7. div.appendChild(br);
  8. //添加label ,存放指标名称
  9. var div2 = document.createElement("label");
  10. div2.innerText = data[n].QualitativeTargetName;
  11. div.appendChild(div2);
  12. //添加text ,存放指标权重
  13. var input = document.createElement("input");
  14. input.setAttribute('type', 'text');
  15. input.setAttribute('ReadOnly', 'True');  //设置文本为只读类型
  16. input.value = data[n].DevelopmentAllWeight
  17. div.appendChild(input);
  18. //添加select 存放指标id
  19. var targetID = document.createElement("select");
  20. targetID.innerText = data[n].QualitativeTargetID;
  21. targetID.setAttribute('hidden', 'hidden');
  22. div.appendChild(targetID);
  23. //添加 %(单位百分比)
  24. //换行
  25. var br = document.createElement("br");
  26. div.appendChild(br);
  27. }
for (var n = 0; n < data.length; n++)
{
//获取div
var div = document.getElementById("DvelopmentTarget");
        //换行
var br = document.createElement("br");
div.appendChild(br); //添加label ,存放指标名称
var div2 = document.createElement("label");
div2.innerText = data[n].QualitativeTargetName;
div.appendChild(div2); //添加text ,存放指标权重
var input = document.createElement("input");
input.setAttribute('type', 'text');
input.setAttribute('ReadOnly', 'True'); //设置文本为只读类型
input.value = data[n].DevelopmentAllWeight
div.appendChild(input); //添加select 存放指标id
var targetID = document.createElement("select");
targetID.innerText = data[n].QualitativeTargetID;
targetID.setAttribute('hidden', 'hidden');
div.appendChild(targetID);
//添加 %(单位百分比) //换行
var br = document.createElement("br");
div.appendChild(br);
}

用到的知识点:

创建子节点、  父元素动态添加子元素:

  1. div2.innerText = data[n].QualitativeTargetName;
  2. div.appendChild(div2);
div2.innerText = data[n].QualitativeTargetName;
div.appendChild(div2);


设置元素属性:

  1. input.setAttribute('ReadOnly', 'True');  //设置文本为只读类型
input.setAttribute('ReadOnly', 'True');  //设置文本为只读类型


清楚div下的所有元素:

  1. div.innerHTML = "";
div.innerHTML = "";


来张大图,再次总结下DOM(文档对象模型)

总结:学习是个不断反复的过程!

最新文章

  1. BZOJ3198[SDOI2013]SPRING
  2. Python自动化之sqlalchemy(修改和查询)
  3. mac 激活Ultra Edit16
  4. Windows平台下ActiveMQ 安装
  5. 最小的N个和(codevs 1245)
  6. 解决json跨域时错误:SyntaxError: invalid label
  7. Android学习3&mdash;电话拨号器
  8. Oracle 插入超4000字节的CLOB字段的处理方法
  9. FE: Sass and Bootstrap 3 with Sass
  10. 保护DNS服务器3大方法
  11. linxu select 返回值
  12. 通过修改 LayoutInflater,全局替换字体!!!
  13. 读书笔记-JavaScript面向对象编程(三)
  14. 仿vue实现简易版mvvm双向绑定
  15. javaScript(7)---函数
  16. dict字典的一些优势和劣势
  17. [JS]js中判断变量类型函数typeof的用法汇总[转]
  18. javascript 原生常用api 数组方法大全
  19. 3dmax osg格式导出插件 osgExp OpenSceneGraph Max Exporter
  20. Spacy 使用

热门文章

  1. 【杂文】虚拟键码表(供函数GetAsyncKeyState()使用)
  2. JavaScript--DOM节点属性
  3. C#上机作业及代码Question2
  4. WebSphere Application Server切换JAVA SDK版本
  5. 406 Queue Reconstruction by Height 根据身高重建队列
  6. SQL server中的T-SQL语句
  7. 在dataGridView空间中添加数据
  8. 解析SQLite中的常见问题与总结详解
  9. python计算auc指标
  10. tcpdump命令使用方法