javascript 这是HTML表问题还是模态问题?

xoshrz7s  于 2023-01-16  发布在  Java
关注(0)|答案(1)|浏览(177)

我正在尝试合并一个没有引导的模态。我已经用了几天了,它有点工作...但是我似乎不能正确地传递ID到删除。如果我点击行...它总是传递表的第一个ID...我现在不确定它是HTML表问题还是模态问题...
这对正确的行每次都有效...但在这里您将看到我正在执行Onclick事件...

<td class="hide">
  <button type="button" class="button114" onclick="return confirm('Click Ok to confirm delete, Cancel to ignore.');"><a href="{% url 'Main:notify_delete2' pk=notify.id %}">
        <div class="txtalgn114"><h2 class="txtalgn114a">Delete</h2></div></a></button></td>

如果我尝试改为模态...它有点工作...它删除一个记录...但现在总是正确的行...

{% for notify in notify_list %}
  <tr style="vertical-align:top">
{% if user.userprofile.eDirector_queue_delete_confirm == "Yes" %}
<td class="hide">
  <div id="myModaldelete{{ notify.id }}" class="modaldelete">
    <div class="modal-content-delete">
      <span class="closedelete"></span>
      <img class="logo4" src="/static/images/threecircles.svg">
      <p>Delete Request?</p>
      <button type="button" class="button165" data-id="{{ notify.id }}">Yes</button>
      <button type="button" class="button160" id="noBtndelete">No</button>
    </div>
  </div>
  <button type="button" class="button114" data-id="{{ notify.id }}">
  <div class="txtalgn114"><h2 class="txtalgn114a">Delete</h2></div></button>
</td>
{% endif &}
{% endfor %}

我尝试将{{notify.id}}附加到ID,并尝试传入data-id...但没有效果。我开始怀疑是否需要采用不同的方法,因为它是一个HTML表...提前感谢您的任何想法...

68de4m5k

68de4m5k1#

好了......在玩了一两天这个概念之后......我弄明白了......我遗漏了一些东西......最重要的是在Javascript和ID值之间来回......我不得不添加以下Javascript逻辑......我把模态从循环中移出来,添加了一个隐藏的输入来获取ID值。感谢所有帮助我把这个拼凑起来的人。这很复杂。反正对我来说。

$('.button114').on('click', function (event) {
     modaldelete[0].style.display = "block";
     var id = $(this).data('id');
     document.getElementById("modal-input-value").value = id;
   });

   $('.button165').on('click', function (event) {
     // Get the hidden input element
     var hiddenInput = document.getElementById("modal-input-value");
     // Get the value of the hidden input
     var id = hiddenInput.value;
     document.location.href = "/url/" + id;
   });

  <div id="myModaldelete{{ notify.id }}" class="modaldelete">
    <div class="modal-content-delete">
      <span class="closedelete"></span>
      <img class="logo4" src="/static/images/threecircles.svg">
      <p>Delete Request?</p>
       <input type="hidden" id="modal-input-value">
      <button type="button" class="button165">Yes</button>
      <button type="button" class="button160" id="noBtndelete">No</button>
    </div>
  </div>

{% for notify in notify_list %}
  <tr style="vertical-align:top">
{% if user.userprofile.eDirector_queue_delete_confirm == "Yes" %}
<td class="hide">
  <button type="button" class="button114" data-id="{{ notify.id }}">
  <div class="txtalgn114"><h2 class="txtalgn114a">Delete</h2></div></button>
</td>
{% endif &}
{% endfor %}

相关问题