Блог

Главная - Вопросы по программированию - Как я могу удалить определенную строку вместо всегда первой строки (модальной)

Как я могу удалить определенную строку вместо всегда первой строки (модальной)

#javascript #html #css

Вопрос:

Я создаю приложение CRM и пытаюсь удалить определенного клиента при нажатии кнопки подтверждения во всплывающем режиме, но он всегда удаляет первого клиента. Я знаю, что это произошло из-за неоднозначного имени класса, и проблема может быть решена путем добавления уникального идентификатора для каждого клиента? Я искал этот тип проблемы, но все еще не знал, как ее решить. Поскольку я сгенерировал каждого клиента циклом for, и мне, возможно, потребуется динамически создавать уникальный идентификатор для каждого клиента, вызывать конкретный идентификатор в javascript и изменять соответствующий 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 %}

Комментарии:

1. Я сделал тебе отрывок. Это не вопрос, связанный с Джанго. Пожалуйста, отредактируйте фрагмент и добавьте 3 ОТРИСОВАННЫЕ строки в обычном HTML

Ответ №1:

document.querySelector() найдите один элемент, и когда он найдет один из них, он удалит его.

В вашем случае есть несколько строк с параметром поиска, поэтому он найдет более одного элемента, но всегда выберет первый.

Итак, вы должны идентифицировать строку с помощью идентификатора. Например, вы можете сделать:

 <tr class="mt-3" id="line-user-{{ user.id }}">
    <td class="pt-3">{{ user.level }}</td>
    <td class="pt-3">all others TDs</td>
</tr>
 
 var item = document.querySelector('#line-input-'   userId);
item.style.visibility = 'hidden';
item.style.opacity = '0';

Ответ №2:

Несколько вещей

Пожалуйста, изучите приведенный ниже код

  1. Я переместил модал за пределы цикла и отправил ему идентификатор пользователя при доступе к строке
  2. Я переместил видимость с CSS на a .скрыть класс
  3. Я добавляю и удаляю этот класс
  4. Я использую делегирование из тела таблицы, которое также содержит идентификатор пользователя в атрибуте данных

Я рекомендую вам не использовать hrefs, которые удаляют данные. Один визит бота Google удалит вашу базу данных пользователей. Вместо этого используйте 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 amp;amp; 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>
Метки: