div中迴圈生成button並新增點選事件
回看剛剛學習js的博文,頁面迴圈生成節點是頁面最基礎的操作之一。
要讓頁面顯示效果,必然在頁面新增dom元素!如果想要多個button,那麼迴圈新增必不可少。
首先定義div:
<div id="people" style="border: groove; padding-top:1px;width: 58%;height: 253px;overflow-y:auto;"></div>
over-flow-y可以開啟y軸滾動條
迴圈新增button的 js程式碼:
//迴圈在div中新增button
function addButton(){
var people = $('#subContent' ).data('sendPeople'),str="";
for(var i=0; i<people.length; i++){
var name = people[i].name+" "+"x";
str+='<input type="button" style="margin:8px;width:84px" class="btn btn-default" name="'+"sendPeople"+'" id="'+i+'" value="'+name+'" />';
}
document.getElementById("people" ).innerHTML=str;
//$('#people').html(str)
}
1.測試用的資料,採用JQuery的儲存方式。
2.如果用js原生語言可以將方法改為傳遞引數型別:addButton(people)
3.document.getElementById(“people”).innerHTML=str;用於生成str語句中的內容,innerHTML為覆寫操作,如果想在頁面新增而不影響原本的元素,可以用append操作。
4.document.getElementById("people").innerHTML=str;
是js原生寫法,等同於$("#people").html(str);
但是有趣的是
$("#people").innerHTML=str
並不能執行,看來 $(“#people”)並不完全等同document.getElementById(“people”)。
這是因為JQuery是DOM的封裝和拓展,並不完全等於dom元素。
var testPeople = [
{"id":"1","name":"李1"},{"id":"2","name":"李大龍2"},{"id":"3","name":"李麗麗3"},{"id":"4","name":"李4"},{"id":"5","name":"李5"},{"id":"6","name":"王6"},{"id":"7","name":"王薩德7"},{"id":"8","name":"王三單8"},{"id":"9","name":"王9"},{"id":"10","name":"王10"}];
效果圖:
拓展使用:新增點選事件/新增自定義屬性
//迴圈在div中新增button
function addButton(){
var people = $('#subContent').data('sendPeople'),
str="";
for(var i=0,len=people.length; i<len; i++){
var name = people[i].name+" "+"x";
str+='<input type="button" style="margin:8px;width:84px" class="btn btn-default" name="'+"sendPeople"+'" id="'+i+'" value="'+name+'" />';
}
document.getElementById("people").innerHTML=str;
//自定義屬性儲存people
for(var j=0; j<people.length; j++){
var peopleId = people[j].id;
$('#'+j).attr('peopleId',peopleId);
}
btnClick();
}
點選事件:
function btnClick(){
var people = $('#subContent').data('sendPeople');
$("input[name='sendPeople']").off('click').on('click',function(){
var indexId = $(this).attr("id"),
name = people[indexId].name,
peopleId = $('#'+indexId).attr('peopleId');
$.confirm({
title: '警告: ',
content: '確認刪除"'+name+'"該收件人',
buttons: {
ok: {
text: "確定",
btnClass: 'btn-sm',
keys: ['enter'],
action: function(){
people.splice(indexId, 1); $('#subContent').data('sendPeople',people);
addButton();
}
},
cancel: {
text: "取消",
btnClass: 'btn-sm',
action: function(){
}
}
}
});
});
}
1.利用定義時,html中input name標籤可以同名。JQuery可以根據name選取所有的name=“sendPeople”的標籤並定義點選事件。注意要先off再on避免重複定義方法。
2.利用splice(indexId, num),indexId=刪除的位置,num=刪除個數。
3.利用html5自定義屬性,$('').attr("peopleId",people)
儲存資料,同樣可以儲存物件。
4.在點選事件觸發時,利用$(this).attr("id")
取出觸發點選事件的id。
相關推薦
div中迴圈生成button並新增點選事件
回看剛剛學習js的博文,頁面迴圈生成節點是頁面最基礎的操作之一。 要讓頁面顯示效果,必然在頁面新增dom元素!如果想要多個button,那麼迴圈新增必不可少。 首先定義div: <div id="people" style="border: groo
獲取場景中的所有按鈕,並新增點選事件
void Start() {//初始化時 獲取 所有按鈕新增監聽 Addlisteningevent(); } public void Addlisteningevent() {//查詢所有按鈕 Button[] allObj =
Flutter自定義折線圖並新增點選事件
前言 最近用Flutter做了一個天氣類的app,我也是新手,對flutter理解還不是很深入,但是開發過程中的程式設計思想給了我很大的啟發。Dart語言特性很優秀,單執行緒模型,非同步io,初始化列表,函式也是物件,鏈式呼叫等等,flutter的設計思想很前衛。好了,馬屁只拍到這裡,下面講一下在開發過程中
[Swift通天遁地]一、超級工具-(1)動態標籤:給UILabel文字中的Flag和url新增點選事件
本文將演示動態標籤的使用,它允許使用者在標籤上進行互動操作。 點選【Podfile】,檢視安裝配置檔案。 1 platform :ios, '8.0' 2 use_frameworks! 3 4 target 'DemoApp' do 5 source 'https://githu
JS中使用for迴圈新增點選事件時,獲取i值及引數異常原因及解決辦法
遇見此問題,程式碼檢查了n次都沒毛病,但是卻出現下述問題, 坑了我好久,原來是這個原因,記錄避坑! PS這是js的處理方法, 在jquery中直接用each遍歷元素繫結點選事件即可避免 $('#id').each(function(i){ $(this).click(
Swing 的按鈕迴圈新增點選事件並被公共訪問
package Other; import java.awt.event.ActionEvent; import java.awt.event.ActionListener; import javax.swing.JButton; import javax.
React map生成元素新增點選事件繫結this
問題使用.map(function(Item)生成元素新增onClick事件:onClick={this.provinceChange.bind(this, "99")}時,前臺訪問報錯:Uncaught TypeError: Cannot read property 'provinceChange' of
關於jquery中 的點選事件,每點一次執行的效果就疊加一次,click是新增點選事件的意思
我本人還是前端的菜鳥,所以一般在寫特效的時候,喜歡用jquery,但是在用jquery的點選事件中,點選後改變容器中的內容,但是發現每點一次就顯示一個內容,點幾次就有幾個。jquery中 的點選事件,每點一次執行的效果就疊加一次,click是新增點選事件的意思。那麼來解決這
iOS開發中兩層view上的button不響應點選事件
iOS button addTarget 無法響應事件 1.問題描述 封裝了一個XYAlterview,繼承於UIView,但button addTarget 無法響應事件. 2.問題重現 @interface XYAlertView : UIView @end XYAlt
Android中WebView載入Html中的圖片新增點選事件
基本的思路: (1)WebView來載入HTML。 (2)向HTML中注入JavaScript,利用JavaScript來呼叫Android中的方法(執行一些跳轉的操作等等)。 首先你必須有一個HTML或者是一個地址,或者是存到本地的一個檔案。我這裡使用的是存到本
iOS中為view新增點選事件
UITapGestureRecognizer *ui=[[UITapGestureRecognizeralloc]initWithTarget:selfaction:@selector(alickLi
在UIView中新增點選事件oc及swift
UIView繼承於UIResponder是沒有addTarget 方法的,所有隻能在UIView上新增手勢UITapGestureRecognizer來實現點選事件。 首先設定UIView(或其子類)為可互動的: oc: iconView.userIn
react native中使用react-native-viewpager實現的商品展示新增點選事件
對於android,react-native-viewpager這個第三方實現商品展示很好用 <ViewPager dataSource={this.state.adDataSource}
在輪播圖中進行新增點選事件
當點選輪播圖的時候,輪播圖需要停止輪播;點選完成之後輪播圖可以繼續自動輪播;點選輪播圖將資料裡面的title進行吐司;當用手指滑動輪播圖的時候,輪播圖可以跟隨手指進行滑動,停止自動輪播;當手指離開之後輪播自動繼續只需要在給輪播圖設定載入圖片的時候新增public class
js 迴圈新增點選事件
直接程式碼: <!DOCTYPE html> <html> <!--方法比較簡單,就是使用for(var i = 0; i < li.length; i++) { (function(x) {
listview中給每個item新增點選事件
給listview每個item新增點選事件,這個聽起來好像挺迷糊的,在adapter裡面我直接就寫startactivity後來沒成功,為此研究了幾分鐘發現有三種方式實現哈。現在說一下我的解決方法。1、在activit
UIWebview獲取網頁中所有圖片並加入點選事件,實現瀏覽圖片的效果
- (void)webViewDidFinishLoad:(UIWebView *)aWebView { //調整字號 NSString *str = @"document.getElementsByTagName('body')[0].style.webkitTe
在adapter中對item的某個控制元件點選,並在點選事件中對其他item控制元件進行設定
今天做專案的時候遇到了這個問題,現在將解決方案的程式碼記錄下來,以便大家遇到同樣的問題時能夠方便處理。 final TextView tv_state = holder.tv_download_st
關於html 中a標籤新增點選事件的方法總結
我們常用的在a標籤中有點選事件: 1. a href="javascript:js_method();" 這是我們平臺上常用的方法,但是這種方法在傳遞this等引數的時候很容易出問題,而且javascript:協議作為a的href屬性的時候不僅會導致不必要的觸發wind
jq動態生成的元素(標籤)新增點選事件
1.在dataTable表格中根據傳來的資料動態生成a標籤 Columns:最後一列 js部分: <script> var ListTable = loadDataTable({ {}, {}, ... { data: "orderI