<h1>通讯录</h1> <button class="add-btn">添加联系人</button> <input type="text" id="search-input" placeholder="搜索姓名或电话"> <table> <thead> <tr> <th>姓名</th> <th>电话</th> <th>邮箱</th> <th>操作</th> </tr> </thead> <tbody id="contact-list"> <!-- 数据渲染 --> </tbody> </table> <!-- 分页按钮 --> <div id="page-buttons"></div> <!-- 弹出层，用于添加或编辑联系人 --> <div id="modal" class="modal" style="display: none;"> <div class="modal-content"> <span class="close">&times;</span> <form> <div class="form-group"> <label for="name">姓名</label> <input type="text" id="name" name="name" required> </div> <div class="form-group"> <label for="phone">电话</label> <input type="text" id="phone" name="phone" required> </div> <div class="form-group"> <label for="email">邮箱</label> <input type="text" id="email" name="email" required> </div> <button id="save-btn">保存</button> <button id="cancel-btn">取消</button> </form> </div> </div>帮我加入一个搜索框可以查找到指定的内容，让数据具有添加删除和编辑的功能，编辑的时候增加弹窗

好的，你需要添加一些 JavaScript 代码来实现这些功能。以下是一个简单的实现： ``` // 定义一个数组用于存储联系人数据 let contacts = []; // 获取页面元素 const addBtn = document.querySelector('.add-btn'); const searchInput = document.querySelector('#search-input'); const contactList = document.querySelector('#contact-list'); const pageButtons = document.querySelector('#page-buttons'); const modal = document.querySelector('#modal'); const modalContent = document.querySelector('.modal-content'); const closeBtn = document.querySelector('.close'); const saveBtn = document.querySelector('#save-btn'); const cancelBtn = document.querySelector('#cancel-btn'); // 定义一些常量 const PAGE_SIZE = 10; // 每页显示的联系人数 const MAX_PAGES = 5; // 最多显示的页码数 // 获取指定页码的联系人数据 function getContacts(page) { const start = (page - 1) * PAGE_SIZE; const end = start + PAGE_SIZE; return contacts.slice(start, end); } // 计算总页数 function getTotalPages() { return Math.ceil(contacts.length / PAGE_SIZE); } // 渲染联系人列表 function renderContactList(page) { const contacts = getContacts(page); let html = ''; contacts.forEach(contact => { html += ` <tr> <td>${contact.name}</td> <td>${contact.phone}</td> <td>${contact.email}</td> <td> <button class="edit-btn" data-id="${contact.id}">编辑</button> <button class="delete-btn" data-id="${contact.id}">删除</button> </td> </tr> `; }); contactList.innerHTML = html; } // 渲染分页按钮 function renderPageButtons(currentPage) { const totalPages = getTotalPages(); let html = ''; if (totalPages > 1) { const startPage = Math.max(currentPage - Math.floor(MAX_PAGES / 2), 1); const endPage = Math.min(startPage + MAX_PAGES - 1, totalPages); for (let i = startPage; i <= endPage; i++) { html += `<button class="page-btn ${i === currentPage ? 'active' : ''}" data-page="${i}">${i}</button>`; } } pageButtons.innerHTML = html; } // 显示弹窗 function showModal(contact) { modal.style.display = 'block'; if (contact) { modalContent.dataset.mode = 'edit'; modalContent.dataset.id = contact.id; document.querySelector('#name').value = contact.name; document.querySelector('#phone').value = contact.phone; document.querySelector('#email').value = contact.email; } else { modalContent.dataset.mode = 'add'; modalContent.removeAttribute('data-id'); document.querySelector('#name').value = ''; document.querySelector('#phone').value = ''; document.querySelector('#email').value = ''; } } // 隐藏弹窗 function hideModal() { modal.style.display = 'none'; } // 添加联系人 function addContact(contact) { contact.id = new Date().getTime(); // 生成一个唯一的 ID contacts.push(contact); } // 修改联系人 function editContact(id, contact) { const index = contacts.findIndex(c => c.id === id); if (index !== -1) { contacts.splice(index, 1, contact); } } // 删除联系人 function deleteContact(id) { const index = contacts.findIndex(c => c.id === id); if (index !== -1) { contacts.splice(index, 1); } } // 初始化页面 function init() { // 绑定事件 addBtn.addEventListener('click', () => { showModal(); }); searchInput.addEventListener('input', () => { const keyword = searchInput.value.trim().toLowerCase(); const filteredContacts = contacts.filter(contact => { return contact.name.toLowerCase().includes(keyword) || contact.phone.includes(keyword); }); renderContactList(1); renderPageButtons(1); }); contactList.addEventListener('click', event => { const target = event.target; if (target.classList.contains('edit-btn')) { const id = Number(target.dataset.id); const contact = contacts.find(c => c.id === id); showModal(contact); } else if (target.classList.contains('delete-btn')) { const id = Number(target.dataset.id); deleteContact(id); renderContactList(1); renderPageButtons(1); } }); pageButtons.addEventListener('click', event => { const target = event.target; if (target.classList.contains('page-btn')) { const page = Number(target.dataset.page); renderContactList(page); renderPageButtons(page); } }); closeBtn.addEventListener('click', () => { hideModal(); }); saveBtn.addEventListener('click', event => { event.preventDefault(); const name = document.querySelector('#name').value.trim(); const phone = document.querySelector('#phone').value.trim(); const email = document.querySelector('#email').value.trim(); if (name && phone && email) { const contact = { name, phone, email }; const mode = modalContent.dataset.mode; const id = mode === 'edit' ? Number(modalContent.dataset.id) : null; if (mode === 'add') { addContact(contact); } else if (mode === 'edit' && id) { editContact(id, contact); } renderContactList(1); renderPageButtons(1); hideModal(); } }); cancelBtn.addEventListener('click', () => { hideModal(); }); // 初始化数据 for (let i = 1; i <= 50; i++) { addContact({ name: `联系人${i}`, phone: `13800000000${i}`, email: `test${i}@example.com` }); } renderContactList(1); renderPageButtons(1); } // 页面加载完成后初始化页面 document.addEventListener('DOMContentLoaded', () => { init(); }); ``` 你需要将这些代码添加到你的 HTML 文件中，并确保正确引入了 jQuery 库。然后你需要在页面中添加一个 ID 为 `search-input` 的搜索框，并在表格中的每一行中添加一个“编辑”按钮和一个“删除”按钮。你还需要在页面底部添加一个 ID 为 `page-buttons` 的容器，用于渲染分页按钮。最后，你需要添加一个 ID 为 `modal` 的弹窗，用于添加或编辑联系人。