JS動態新增div,然後在div中新增元素
需求:
組織部中有個這樣的需求,根據年份動態顯示該年份下的定性指標!
我的做法:
先是放一個空的div,讓後根據指標的資料,動態的往div中新增元素。
程式碼:
空的div,存放定性指標
<div id="DvelopmentTarget"> </div>
動態往div中新增元素:
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); }
用到的知識點:
建立子節點、父元素動態新增子元素:
div2.innerText = data[n].QualitativeTargetName;
div.appendChild(div2);
設定元素屬性:
input.setAttribute('ReadOnly', 'True'); //設定文字為只讀型別
清楚div下的所有元素:
div.innerHTML = "";
來張大圖,再次總結下DOM(文件物件模型)
總結:學習是個不斷反覆的過程!
相關推薦
JS動態新增div,然後在div中新增元素
需求: 組織部中有個這樣的需求,根據年份動態顯示該年份下的定性指標! 我的做法: 先是放一個空的div,讓後根據指標的資料,動態的往div中新增元素。 程式碼: 空的div,存放定性指
js如何實現點選一個按鈕顯示一個div,然後該div上有一個按鈕,點選此按鈕後隱藏,隱藏的同時顯示另外一個div,而在次彈出的div也有一個按鈕,點選後隱藏.
<button id="btn1" onclick="btn1()">報名</button> <div id="div1" style="background:#999999; display:none;"> <button id=
css,js實現在滑鼠移動到一個位置在這個位置下面顯示一個已經存在的div,這個div的位置隨意
<div id="retreatdiv"> <p class="retreat font_s" > 這是要顯示的內容 </div> //當滑鼠移動到這個<span>時候 &
使用gevent.monkey.patch_all() 協程池遇到阻塞,在任務中新增一個sleep()搞定~
關於使用gevent.monkey.patch_all()協程池遇到阻塞解決辦法: import time ... class Example: ... time.sleep(0.000001) 在進行多執行緒時monkey會阻塞住執行緒的繼續執行,需要對monkey.p
python爬蟲如何獲取網頁資訊時,發現所需要的資訊是動態生成的,然後抓包獲取到資訊來源的URL?
如果在利用爬蟲爬取網頁資料的時候,發現是動態生成的時候,目前來看主要表現在以下幾種: 以介面的形式生成資料,這種形式其實挺好處理的,比較典型的是知乎的使用者資訊,我們只要知道介面的URL,就可以不用再考慮頁面本身的內容 以知乎為例,我們在爬取使用者資訊的時候,可能
js 給json物件新增屬性,再給新新增的屬性新增值
json = {id:'123',name:'張三'} 新增一個 status 屬性: json.newParam ='status'; 賦值 json.status = "0";
模擬select,在option中新增圖片
<div class="changeState"> <div class="position-rel"> <div class="bank_xljt"> <img class="jt_x
Js動態追加行,並將內容儲存到資料庫,並取出資料通過js動態顯示
實現步驟講解: 首先需要在html頁面建立一個table表格和一個動態新增行的按鈕 <input type="button" onclick="addT()" value="新增" /> 然後實現表格中追加行的js方法 //新增動態行(可在實現的列中新增相應的滑鼠事
jsp實現仿QQ空間新建多個相簿名稱,向相簿中新增照片
工具:Eclipse,Oracle,smartupload.jar;語言:jsp,Java;資料儲存:Oracle。 實現功能介紹: 主要是新建相簿,可以建多個相簿,在相簿中新增多張照片,刪除照片,刪除相簿,當相簿下有照片時先刪除照片才能刪除相簿。 因為每個相簿和照片要有所
VUE中,HTML物件的ID動態繫結,在mounted中根據ID無法獲取到物件
頁面如下: <template> <div :id="objId" class="randomBoxDiv" :style="stylesBox"> </div> </template> 其中,div的ID是動態繫結的。
easyui行編輯:利用append row新增行,直接在行中編輯,ajax提交儲存
今天工作用到了easyui行編輯,在這裡總結一下,不會的同學可以看看,順便吐槽一下,網上的很多部落格都是貼上複製的,內容很亂 ,而且看不懂,不知道這些貼上複製的懷的是什麼心,不但沒用,還影響別人搜尋。 呼籲大家在寫部落格的時候認真一些,別隻貼上複製,至少可以自
編寫一個程式,在E盤下建立一個abc.txt的文字文件,通過輸出流在文件內新增資料,然後在把abc.txt複製到F盤下
package com.zhidi.lianxi; import java.io.File; import java.io.FileInputStream; import java.io.FileNotFoundException; import java.io.FileO
js動態操作select,按周得到workday工作日的日期段即每月的週一到週五
最近一個專案需要統計每週的工作情況,需要一個select列表,可以選擇填寫某個周的工作情況。option列表是根據前面選擇的年份月份動態顯示的。將選擇的月份按周去掉週六日顯示週一到週五的日期。設計如下: <select id="cyear" onchange
使用MySQL Workbench建立資料庫,建立新的表,向表中新增資料
初學資料庫,記錄一下所學的知識。我用的MySQL資料庫,使用MySQL Workbench管理。下面簡單介紹一下如何使用MySQL Workbench建立資料庫,建立新的表,為表新增資料。 點選上圖中的“加號”圖示,新建一個連線, 如上圖,先輸入資料庫的賬號
runtime學習之- 關聯(association),在分類中新增屬性!
一提到runtime,很多人都會產生莫名的恐懼(比如我。。。) 但事實上,runtime有相當一部分內容很簡單、很好用,比如今天要講的關聯。 在<objc/runtime.h>中,有三個
[AJAX]js設定全域性變數,在ajax中給予賦值賦值不上
因為Ajax是以非同步方式來獲取資料的,執行Ajax的時候你程式是繼續往下面執行的,這樣你那個變數沒有被Ajax方法賦值,因此你的邏輯是無法使用同步方式編寫的 解決方法一: 將邏輯賦值寫在ajax回
js操作dom節點,建立,複製,刪除,新增,查詢等操作總結
1.建立節點 document.createElement(“div”);//建立一個div元素,引數需要是標籤名; document.createTextNode(“233”);//建立一個文
js 給json物件新增屬性,再給新新增的屬性新增值
json = {id:'123',name:'張三'} 新增一個 status 屬性: json.newParam ='status'; 賦值 json.status = "0"; 此時資料為:json={id:'123',name:'張三'
隨機生成一個數組,然後依次以 當前元素:當前元素之前的元素 格式輸出
img alt 輸出 數組 void 生成 如果 mage ray int main(void) { int m[9] = { 0 }; srand(time(0)); for (int i = 0; i < 9; i++) { m[i] = ra
繼續對上一頁的ecah進行 優化,求一個數組的和,最大值,最小值,獲取陣列中的元素,3
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style t