function showModal(type, index) { let modal = document.getElementById('modal'); let form = modal.querySelector('form'); let saveBtn = modal.querySelector('#save-btn'); let cancelBtn = modal.querySelector('#cancel-btn'); if (type === 'add') { form.reset(); saveBtn.textContent = '添加'; } else if (type === 'edit') { let contact = contacts[index]; form.name.value = contact.name; form.phone.value = contact.phone; form.email.value = contact.email; saveBtn.textContent = '保存'; } modal.style.display = 'block';给编辑和删除按钮设计一个粉色的渐变样式

可以在编辑和删除按钮的CSS样式中添加以下代码来实现粉色渐变样式：

background: linear-gradient(to bottom right, #ff78ae, #ff9472);
border: none;
color: #fff;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;

你可以根据需要修改渐变颜色、padding和border-radius的大小等属性。

相关问题

function showModal(type, index) { let modal = document.getElementById('modal'); let form = modal.querySelector('form'); let saveBtn = modal.querySelector('#save-btn'); let cancelBtn = modal.querySelector('#cancel-btn'); if (type === 'add') { form.reset(); saveBtn.textContent = '添加'; } else if (type === 'edit') { let contact = contacts[index]; form.name.value = contact.name; form.phone.value = contact.phone; form.email.value = contact.email; saveBtn.textContent = '保存'; } modal.style.display = 'block';怎么给里面的编辑和删除按钮添加样式

你可以在 HTML 代码中为编辑和删除按钮添加类名，然后在 CSS 中定义这些类的样式。例如：

HTML 代码：

<button class="edit-btn">编辑</button>
<button class="delete-btn">删除</button>

CSS 代码：

.edit-btn {
  background-color: blue;
  color: white;
  border: none;
  padding: 5px 10px;
  cursor: pointer;
}

.delete-btn {
  background-color: red;
  color: white;
  border: none;
  padding: 5px 10px;
  cursor: pointer;
}

在这个示例中，我们为编辑按钮和删除按钮分别添加了 `edit-btn` 和 `delete-btn` 类，并为这些类定义了一些基本的样式，包括背景颜色、文字颜色、边框、内边距和鼠标指针样式。你可以根据自己的需要调整这些样式。

function renderData() { let tbody = document.querySelector('tbody'); tbody.innerHTML = ''; contacts.forEach((contact, index) => { let tr = document.createElement('tr'); tr.innerHTML = ` <td>${contact.name}</td> <td>${contact.phone}</td> <td>${contact.email}</td> <td> <button class="edit-btn" data-index="${index}">编辑</button> <button class="delete-btn" data-index="${index}">删除</button> </td> `; tbody.appendChild(tr); }); } // 点击编辑或删除按钮 document.querySelector('tbody').onclick = function(event) { let target = event.target; let index = target.getAttribute('data-index'); if (target.classList.contains('edit-btn')) { showModal('edit', index); } else if (target.classList.contains('delete-btn')) { contacts.splice(index, 1); renderData(); } };帮我添加确认删除提示

好的，可以在删除按钮的点击事件中添加确认弹窗提示，代码如下：

// 点击编辑或删除按钮
document.querySelector('tbody').onclick = function(event) {
    let target = event.target;
    let index = target.getAttribute('data-index');

    if (target.classList.contains('edit-btn')) {
        showModal('edit', index);
    } else if (target.classList.contains('delete-btn')) {
        if (confirm('确定要删除该联系人吗？')) {
            contacts.splice(index, 1);
            renderData();
        }
    }
};

这里使用了 JavaScript 内置的 `confirm` 函数来弹出确认弹窗，并根据用户的选择执行删除操作或取消操作。