<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">×</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>帮我加入一个搜索框，点击搜索按钮或者通过搜索框的内容可以查找到查找的内容，让数据具有添加删除和编辑的功能，编辑的时候增加弹窗

好的，以下是添加搜索框、增删改功能和弹窗编辑功能的代码： HTML代码： ``` <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">×</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代码： ``` // 定义全局变量 var contacts = []; // 通讯录数据 var modalMode = "add"; // 弹窗模式，初始为添加模式 var modalId; // 当前编辑的联系人id // 页面加载完成后执行初始化函数 window.onload = function() { init(); } // 初始化函数 function init() { // 获取本地存储的通讯录数据 var contactsData = localStorage.getItem("contacts"); if (contactsData) { contacts = JSON.parse(contactsData); } // 渲染表格和分页按钮 renderTable(contacts); renderPageButtons(contacts); // 绑定事件 document.querySelector("#search-input").addEventListener("input", searchContacts); document.querySelector(".add-btn").addEventListener("click", showModal); document.querySelector("#save-btn").addEventListener("click", saveContact); document.querySelector("#cancel-btn").addEventListener("click", hideModal); document.querySelector("#contact-list").addEventListener("click", handleContactClick); } // 渲染表格函数 function renderTable(data) { var tableBody = document.querySelector("#contact-list"); tableBody.innerHTML = ""; for (var i = 0; i < data.length; i++) { var contact = data[i]; var tr = "<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>"; tableBody.insertAdjacentHTML("beforeend", tr); } } // 渲染分页按钮函数 function renderPageButtons(data) { var pageButtons = document.querySelector("#page-buttons"); pageButtons.innerHTML = ""; var pageCount = Math.ceil(data.length / 10); for (var i = 1; i <= pageCount; i++) { var button = "<button class='page-btn' data-page='" + i + "'>" + i + "</button>"; pageButtons.insertAdjacentHTML("beforeend", button); } } // 搜索函数 function searchContacts() { var keyword = this.value.trim().toLowerCase(); var filteredContacts = contacts.filter(function(contact) { return contact.name.toLowerCase().indexOf(keyword) !== -1 || contact.phone.indexOf(keyword) !== -1; }); renderTable(filteredContacts); renderPageButtons(filteredContacts); } // 显示弹窗函数 function showModal() { document.querySelector("#name").value = ""; document.querySelector("#phone").value = ""; document.querySelector("#email").value = ""; document.querySelector("#modal").style.display = "block"; } // 隐藏弹窗函数 function hideModal() { document.querySelector("#modal").style.display = "none"; } // 保存联系人函数 function saveContact(event) { event.preventDefault(); // 阻止默认提交事件 var name = document.querySelector("#name").value.trim(); var phone = document.querySelector("#phone").value.trim(); var email = document.querySelector("#email").value.trim(); if (name && phone && email) { if (modalMode === "add") { // 添加联系人 var newContact = { id: Date.now().toString(), name: name, phone: phone, email: email }; contacts.push(newContact); localStorage.setItem("contacts", JSON.stringify(contacts)); } else { // 编辑联系人 var contactIndex = contacts.findIndex(function(contact) { return contact.id === modalId; }); if (contactIndex !== -1) { contacts[contactIndex].name = name; contacts[contactIndex].phone = phone; contacts[contactIndex].email = email; localStorage.setItem("contacts", JSON.stringify(contacts)); } } renderTable(contacts); renderPageButtons(contacts); hideModal(); } } // 处理联系人列表中的按钮点击事件 function handleContactClick(event) { if (event.target.classList.contains("edit-btn")) { // 编辑按钮被点击 modalMode = "edit"; modalId = event.target.getAttribute("data-id"); var contact = contacts.find(function(contact) { return contact.id === modalId; }); if (contact) { document.querySelector("#name").value = contact.name; document.querySelector("#phone").value = contact.phone; document.querySelector("#email").value = contact.email; showModal(); } } else if (event.target.classList.contains("delete-btn")) { // 删除按钮被点击 var confirmDelete = confirm("确定要删除这个联系人吗？"); if (confirmDelete) { var contactId = event.target.getAttribute("data-id"); var contactIndex = contacts.findIndex(function(contact) { return contact.id === contactId; }); if (contactIndex !== -1) { contacts.splice(contactIndex, 1); localStorage.setItem("contacts", JSON.stringify(contacts)); renderTable(contacts); renderPageButtons(contacts); } } } } // 处理分页按钮点击事件 document.addEventListener("click", function(event) { if (event.target.classList.contains("page-btn")) { var page = event.target.getAttribute("data-page"); var startIndex = (page - 1) * 10; var endIndex = startIndex + 10; var pageData = contacts.slice(startIndex, endIndex); renderTable(pageData); } }); ``` CSS代码： ``` /* 弹出层样式 */ .modal { position: fixed; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.4); } .modal-content { background-color: #fefefe; margin: 15% auto; padding: 20px; border: 1px solid #888; width: 50%; } .close { color: #aaa; float: right; font-size: 28px; font-weight: bold; } .close:hover, .close:focus { color: black; text-decoration: none; cursor: pointer; } /* 表格样式 */ table { border-collapse: collapse; width: 100%; } th, td { text-align: left; padding: 8px; } th { background-color: #333; color: white; } tr:nth-child(even) { background-color: #f2f2f2; } /* 分页按钮样式 */ #page-buttons { margin-top: 20px; } .page-btn { background-color: #4CAF50; border: none; color: white; padding: 10px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin-right: 5px; cursor: pointer; } .page-btn.active { background-color: #008CBA; } /* 搜索框样式 */ #search-input { margin: 20px 0; padding: 10px; border: none; border-bottom: 1px solid #ccc; width: 100%; box-sizing: border-box; font-size: 16px; color: #666; } #search-input:focus { outline: none; border-bottom: 1px solid #008CBA; } /* 添加、编辑、删除按钮样式 */ .add-btn { background-color: #4CAF50; border: none; color: white; padding: 10px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin-right: 5px; cursor: pointer; } .edit-btn, .delete-btn { background-color: #008CBA; border: none; color: white; padding: 5px 10px; text-align: center; text-decoration: none; display: inline-block; font-size: 14px; margin-right: 5px; cursor: pointer; } .edit-btn:hover, .delete-btn:hover { background-color: #666; } ```