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` 函数来弹出确认弹窗，并根据用户的选择执行删除操作或取消操作。

currentPlanChanged:async function(e){ let i = e.detail.value let plans = this.data.prices.plans let plan = plans[i] if(plan.name==this.data.plan)return let res = await wx.showModal({ cancelColor: 'cancelColor', title:'是否修改？', content:'修改当前的会员套餐' }) if(res.confirm){}else return console.log('时间打印：',this.data.realToday) let buyDate = this.data.expireDate > this.data.realToday ? this.data.expireDate : this.data.realToday let expireDate = lib.getDateByDeltaMonth(buyDate, plan.month) this.renderData({ plan:plan.name, buyDate, expireDate }) }这个函数无法正常设置日期，会显示错误，什么原因？这是另外一个函数function getDateByDeltaMonth(startDate, n) { var date = new Date(startDate) var m = date.getMonth() date.setMonth(m + n) var y = date.getFullYear() m = date.getMonth() + 1 var d = date.getDate() return y + '-' + (m < 10 ? '0' + m : m) + '-' + (d < 10 ? '0' + d : d) + '' }

这段代码中，`lib.getDateByDeltaMonth` 函数的参数 `startDate` 和 `buyDate` 都是字符串类型，需要转换成 Date 类型才能进行日期计算。你可以在函数内部通过 `new Date(startDate)` 和 `new Date(buyDate)` 进行转换。

修改后的代码如下：

function getDateByDeltaMonth(startDate, n) {
  var date = new Date(startDate)
  var m = date.getMonth()
  date.setMonth(m + n)
  var y = date.getFullYear()
  m = date.getMonth() + 1
  var d = date.getDate()
  return y + '-' + (m < 10 ? '0' + m : m) + '-' + (d < 10 ? '0' + d : d) + ''
}

async function currentPlanChanged(e) {
  let i = e.detail.value
  let plans = this.data.prices.plans
  let plan = plans[i]
  if (plan.name == this.data.plan) return
  let res = await wx.showModal({
    cancelColor: 'cancelColor',
    title: '是否修改？',
    content: '修改当前的会员套餐'
  })
  if (res.confirm) {
    let buyDate = new Date(this.data.expireDate) > new Date(this.data.realToday) ? this.data.expireDate : this.data.realToday
    let expireDate = getDateByDeltaMonth(buyDate, plan.month)
    this.renderData({
      plan: plan.name,
      buyDate,
      expireDate
    })
  } else {
    return console.log('时间打印：', this.data.realToday)
  }
}