时间戳

首页 > 解决方案 > 如何删除特定行而不是始终删除第一行（模态）

javascript - 如何删除特定行而不是始终删除第一行（模态）

问题描述

我正在构建一个 CRM 应用程序并尝试在弹出模式中单击确认按钮时删除特定客户，但它始终会删除第一个客户。我知道这是由于类名不明确而发生的，可以通过为每个客户端添加唯一的 id 来解决问题吗？我一直在寻找这种类型的问题，但仍然不知道如何解决它。由于我通过 for 循环生成了每个客户端，我可能需要为每个客户端动态创建一个唯一的 id 并在 javascript 中调用特定的 id 并修改相应的 CSS？我觉得这种方式可能过于复杂。还有其他方法可以实现我的目标吗？谢谢。

function clientmodal() {
  document.querySelector('.modal-bg').style.visibility = 'visible';
  document.querySelector('.modal-bg').style.opacity = '1';
}

function clientcancel() {
  document.querySelector('.modal-bg').style.visibility = 'hidden';
  document.querySelector('.modal-bg').style.opacity = '0';
}
.modal-bg {
  position: fixed;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.4);
  display: flex;
  justify-content: center;
  align-items: center;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.5s;
}

.delete-modal {
  background-color: white;
  border-radius: 10px;
  width: 30%;
  height: 13%;
  align-items: center;
}

.modal-title {
  text-align: center;
  margin-top: 15px;
}
<!-- client table -->

{% for user in clients %}

<tr class="mt-3">
  <td class="pt-3">{{ user.level }}</td>
  <td class="pt-3"><a href="{% url 'clients' user.id %}">{{ user.first_name }}</a></td>
  <td class="pt-3">{{ user.last_name }}</td>
  <td class="pt-3">{{ user.country }}</td>
  <td class="pt-3">{{ user.contact }}</td>
  <td class="pt-3">{{ user.contact_number }}</td>
  <!-- <td><a href="#" class="btn btn-outline-primary btn-sm">Client Info</a>  -->
  <td><a href="{% url 'update' user.id %}" class="btn btn-outline-warning">Update</a>
    <a class="btn btn-outline-danger" onclick="clientmodal()">Delete</a></td>
</tr>


<!-- client modals -->

<div class="modal-bg">
  <div class="delete-modal">
    <div class="modal-title">
      <h3>Are you sure you want to delete this client?</h3>
    </div>
    <div class="modal-footer">
      <a type="button" class="btn btn-secondary cancel" onclick="clientcancel()">Cancel</a>
      <a href="{% url 'delete' user.id %}" class="btn btn-danger">Yes</a>
    </div>
  </div>
</div>
{% endfor %}

标签： javascripthtmlcss

解决方案

几件事

请研究下面的代码

  1. 我将模式移到循环之外，并在访问该行时将用户标识发送给它
  2. 我将可见性从 CSS 移到 .hide 类
  3. 我添加和删除这个类
  4. 我使用表体中的委托，该表体还包含数据属性中的用户 ID

我建议您不要使用删除内容的 href。来自 google bot 的一次访问将擦除您的用户数据库。而是在我评论的地方使用 ajax

const modal = document.querySelector('.modal-bg');
const modalLink = modal.querySelector(".confirm");
let currentRow;
document.getElementById("tb").addEventListener("click", function(e) {
  const tgt = e.target;
  const parent = e.target.closest("tr");
  const id = parent.dataset.userid;
  currentRow = parent;
  if (tgt.classList.contains("delete")) {
    e.preventDefault()
    modal.classList.remove("hide");
    modalLink.href = `{{ url }}?id=${id}`;
  }
});
modal.addEventListener("click", function(e) {
  // e.preventDefault(); // here you REALLY should ajax
  if (currentRow && e.target.classList.contains("confirm")) currentRow.remove()
  modal.classList.add("hide");
})
.modal-bg {
  position: fixed;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.4);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: visibility 0s, opacity 0.5s;
}

.delete-modal {
  background-color: white;
  border-radius: 10px;
  width: 30%;
  height: 13%;
  align-items: center;
}

.modal-title {
  text-align: center;
  margin-top: 15px;
}

.hide {
  visibility: hidden;
  opacity:0;
}
<table>
  <tbody id="tb">
    <tr class="mt-3" data-userid="{% user.id %}">
      <td class="pt-3">1</td>
      <td class="pt-3"><a href="">A1</a></td>
      <td class="pt-3">B1</td>
      <td class="pt-3">C1</td>
      <td class="pt-3">D1</td>
      <td class="pt-3">E1</td>
      <td><a href="{% url 'update' user.id %}" class="btn btn-outline-warning">Update</a>
        <a class="btn btn-outline-danger delete">Delete</a></td>
    </tr>
    <tr class="mt-3" data-userid="{% user.id %}">
      <td class="pt-3">2</td>
      <td class="pt-3"><a href="">A2</a></td>
      <td class="pt-3">B2</td>
      <td class="pt-3">C2</td>
      <td class="pt-3">D2</td>
      <td class="pt-3">E2</td>
      <td><a href="{% url 'update' user.id %}" class="btn btn-outline-warning">Update</a>
        <a class="btn btn-outline-danger delete">Delete</a></td>
    </tr>
  </tbody>
</table>

<!-- client modals -->

<div class="modal-bg hide">
  <div class="delete-modal">
    <div class="modal-title">
      <h3>Are you sure you want to delete this client?</h3>
    </div>
    <div class="modal-footer">
      <a type="button" class="btn btn-secondary cancel">Cancel</a>
      <a href="" class="btn btn-danger confirm">Yes</a>
    </div>
  </div>
</div>

推荐阅读