需求:
組織部中有個(gè)這樣的需求,根據年份動(dòng)態(tài)顯示該年份下的定性指標!
我的做法:
先是放一個(gè)空的div,讓后根據指標的數據,動(dòng)態(tài)的往div中添加元素。
代碼:
空的div,存放定性指標
<div id="DvelopmentTarget"> </div>動(dòng)態(tài)往div中添加元素:
- for (var n = 0; n < data.length; n++)
- {
- //獲取div
- var div = document.getElementById("DvelopmentTarget");
- //換行
- var br = document.createElement("br");
- div.appendChild(br);
- //添加label ,存放指標名稱(chēng)
- 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'); //設置文本為只讀類(lèi)型
- 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);
- }
用到的知識點(diǎn):
創(chuàng )建子節點(diǎn)、 父元素動(dòng)態(tài)添加子元素:
- div2.innerText = data[n].QualitativeTargetName;
- div.appendChild(div2);
設置元素屬性:
input.setAttribute('ReadOnly', 'True'); //設置文本為只讀類(lèi)型清楚div下的所有元素:
div.innerHTML = "";來(lái)張大圖,再次總結下DOM(文檔對象模型)
總結:學(xué)習是個(gè)不斷反復的過(guò)程!
聯(lián)系客服