<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` 的弹窗，用于添加或编辑联系人。