在使用JQuery提示用户后如何删除动态表的特定行?

问题描述 投票:2回答:1

[下面是我用来将用户在模式中输入的特定输入值添加到使用JQuery的表的代码,在每一行中还会生成一个删除按钮$('td:contains("delete")').html("<i class='far fa-trash-alt' id='btnDelete'></i>").addClass("text-center delete delete:hover"),但是我在实际删除表中所需的行。

if ($("#insert-image").val() !== '' && $("#insert-name").val() !== '' && $("#insert-surname").val() !== '') {
      var imagePrep = $("#insert-image").val().replace(/C:\\fakepath\\/i, 'images/');
      let row = '<tr> <td class="align-middle">' + "image" + '</td> <td class="align-middle">' + $("#insert-name").val() + '</td> <td class="align-middle">' + $("#insert-surname").val() + '</td> <td class="align-middle">' + "edit" + '</td> <td class="align-middle">' + "delete" + '</td> </tr>'
      $('tbody').append(row);

      $('td:contains("image")').html("<img src=" + imagePrep + " alt='selected-image' class='image' data-toggle='popover-hover'>");

      $('td:contains("edit")').html("<i class='fas fa-edit'></i>").addClass("text-center edit edit:hover").on('click', function() {});

      $('td:contains("delete")').html("<i class='far fa-trash-alt' id='btnDelete'></i>").addClass("text-center delete delete:hover").on('click', function() {
        $("#delete-modal").modal('show');
        $("#btnDeleteConfirmation").on('click', function() {
            $(this).parents('tr').remove();
            $("#delete-modal").modal('hide');
          });
      });
    }
  });

表和删除模式的HTML代码是:

<table class="table table-bordered">
        <thead class="thead-dark">
          <tr>
            <th scope="col">Image</th>
            <th scope="col">Name</th>
            <th scope="col">Surname</th>
            <th scope="col">Edit</th>
            <th scope="col">Delete</th>
          </tr>
        </thead>
        <tbody id="tbody">

        </tbody>
</table>

<div class="modal fade" id="delete-modal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalCenterTitle">Delete Confirmation</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          Are you sure you want to delete this item?
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal" id="btnDeleteDismiss">No</button>
          <button type="button" class="btn btn-primary" id="btnDeleteConfirmation">Yes</button>
        </div>
      </div>
    </div>
  </div>

单击特定行的删除按钮时,将显示模式#delete-modal,提示用户确认是否要删除所需的行,只有当用户在模式#btnDeleteConfirmation上单击“是”时,该行才会被删除。已删除。我的尝试如下,但实际上并没有删除任何内容,我不确定自己在做什么错。

$('td:contains("delete")').html("<i class='far fa-trash-alt' id='btnDelete'></i>").addClass("text-center delete delete:hover").on('click', function() {
        $("#delete-modal").modal('show');
        $("#btnDeleteConfirmation").on('click', function() {
            $(this).parents('tr').remove();
            $("#delete-modal").modal('hide');
          });
      });

任何帮助将不胜感激。

javascript jquery html
1个回答
3
投票
您将

this引用错误。 btnDeleteConfirmation没有父tr,因此不起作用。您需要存储此行的此引用。

$('td:contains("delete")').html("<i class='far fa-trash-alt' id='btnDelete'></i>").addClass("text-center delete delete:hover").on('click', function() { let deleteRef = this;
然后,当您将其与parent('tr')。remove()传递时,它将起作用!
© www.soinside.com 2019 - 2024. All rights reserved.