jQuery通訊錄是一種基于jQuery框架的通訊錄列表實現方式。它可以幫助用戶快速實現通訊錄的展示和操作。下面是一段簡單的示例代碼:
//定義通訊錄數據,包含姓名、電話和郵箱 var contacts = [ {name:'張三', phone:'13812345678', email:'zhangsan@163.com'}, {name:'李四', phone:'13987654321', email:'lisi@gmail.com'}, {name:'王五', phone:'15876543210', email:'wangwu@qq.com'}, //更多聯系人... ]; //將數據加載到頁面中 $.each(contacts, function(index, contact) { //創建列表行 var row = '<tr><td>' + contact.name + '</td><td>' + contact.phone + '</td><td>' + contact.email + '</td></tr>' //添加行到表格中 $('#contactList').append(row); }); //添加新聯系人 $('#btnAddContact').click(function() { //獲取表單數據 var name = $('#txtName').val(); var phone = $('#txtPhone').val(); var email = $('#txtEmail').val(); //創建新的聯系人對象 var newContact = {name: name, phone: phone, email: email}; //添加到通訊錄數據中 contacts.push(newContact); //添加新行到表格中 var row = '<tr><td>' + newContact.name + '</td><td>' + newContact.phone + '</td><td>' + newContact.email + '</td></tr>'; $('#contactList').append(row); });
在上面的代碼示例中,我們首先定義了一個包含聯系人信息的數組,然后使用$.each方法將數據添加到表格中展示出來。接著,我們創建了一個添加聯系人的按鈕,當用戶點擊該按鈕后,我們從表單中獲取新的聯系人信息,添加到通訊錄數據數組中,同時在頁面上添加新的一行。