js動態往div裡新增按鈕的兩種方式以及jQuery中$.each的用法詳解
1、js動態往div裡新增按鈕的兩種方式
方式1:
var MyDiv =document.getElementById("div_id");
var button = document.createElement("input");
button.setAttribute("type", "button");
button.setAttribute("value", value);
button.setAttribute("id", id);
button.setAttribute("class", class);
button.style.width = "12%";
button.setAttribute("onclick", "function(this.id)");
MyDiv.appendChild(button);
方式2:
var button = "<a role='button' id="+jinfo[i].id+" onclick='function(this.id)'><i class='icon-edit'></i></a>";
MyDiv.innerHTML += button; //第二種方式方便往<a></a>標籤之間新增內容
注意在jquery中似乎直接MyDiv.html(“新增的內容”);就可以了
2、jQuery中$.each的用法詳解
下面提一下jQuery的each方法的幾種常用的用法
Js程式碼
var arr = [ "one", "two", "three", "four"];
$.each(arr, function(){
alert(this);
});
//上面這個each輸出的結果分別為:one,two,three,four
var arr1 = [[1, 4, 3], [4, 6, 6], [7, 20, 9]]
$.each(arr1, function(i, item){
alert(item[0]);
});
//其實arr1為一個二維陣列,item相當於取每一個一維陣列,
//item[0]相對於取每一個一維陣列裡的第一個值
//所以上面這個each輸出分別為:1 4 7
var obj = { one:1, two:2, three:3, four:4};
$.each(obj, function(key, val) {
alert(obj[key]);
});
//這個each就有更厲害了,能迴圈每一個屬性
//輸出結果為:1 2 3 4
1、遍歷物件(有附加引數)
$.each(Object, function(p1, p2) {
this; //這裡的this指向每次遍歷中Object的當前屬性值
p1; p2; //訪問附加引數
}, ['引數1', '引數2']);
2、遍歷陣列(有附件引數)
$.each(Array, function(p1, p2){
this; //這裡的this指向每次遍歷中Array的當前元素
p1; p2; //訪問附加引數
}, ['引數1', '引數2']);
3、遍歷物件(沒有附加引數)
$.each(Object, function(name, value) {
this; //this指向當前屬性的值
name; //name表示Object當前屬性的名稱
value; //value表示Object當前屬性的值
});
4、遍歷陣列(沒有附加引數)
$.each(Array, function(i, value) {
this; //this指向當前元素
i; //i表示Array當前下標
value; //value表示Array當前元素
});
相關文章
- 動態代理的兩種方式以及區別
- jQuery $.each用法jQuery
- jQuery點選按鈕刪除div元素jQuery
- [JS]bootstrapTable新增操作按鈕JSbootAPT
- Linux下chkconfig命令詳解即新增服務以及兩種方式啟動關閉系統服務Linux
- Vue中引入jQuery兩種方式可在vue中引入jQueryVuejQuery
- Js Jquery 實現的按鈕倒數計時整理JSjQuery
- jquery js 設定 div 的內容,給 div 新增一個屬性jQueryJS
- vue之神奇的動態按鈕Vue
- jQuery動態設定div元素的尺寸jQuery
- JS 垃圾回收的兩種方式JS
- Python中可迭代物件、迭代器以及iter()函式的兩個用法詳解Python物件函式
- 在 js 裡定義按鈕的響應函式JS函式
- Fiori Elements List Report table 裡的普通按鈕,Global 按鈕 和 Determining 按鈕
- VUE動態路由和按鈕的實現Vue路由
- vue js 獲取滾動距離 以及 返回頂部按鈕VueJS
- VOL表格動態新增操作按鈕及彈窗確認方法
- 兩種 cp 命令的絕佳用法的快捷方式
- js.ui中的datepicker 元件增加清除按鈕JSUI元件
- unity 實現輪盤方式的按鈕滾動效果Unity
- Windows10系統中操作中心按鈕丟失了的兩種找回方法Windows
- JS中的九個console命令以及用法JS
- button按鈕重新整理頁面的幾種方式
- Redis詳解 - SpringBoot整合Redis,RedisTemplate和註解兩種方式的使用RedisSpring Boot
- 易語言執行js的兩種方式JS
- 詳解MVCC以及儘可能解決幻讀的兩種方案MVC
- 動態建立具有刪除行按鈕的table表格
- 往 VisualStudio 工具箱中新增 WPF/WinForms 控制元件的幾種方式ORM控制元件
- div的多種居中方式
- js裡document的用法JS
- js動態新增、刪除table中的tr、td、inputJS
- 如何為資料行的新增操作按鈕
- JavaScript點選按鈕返回底部詳解JavaScript
- jQuery入門(七)jQuery實現按鈕分頁jQuery
- jquery如何讓按鈕不可用jQuery
- Django model select的各種用法詳解Django
- 兩種動態建立表格的方法
- sklearn中train_test_splite的兩種用法AI