使用 jQuery 从视觉上删除表行

Delete visualy a table row with jQuery

本文关键字：删除 视觉上 jQuery 使用      更新时间：2023-09-26

>我有一个显示MySQL表中数据的html结构：

<tr>
  <td><? echo $rowAL[1]; ?></td>
  <td><span class="badge <? echo $cc; ?>"><? echo $rowAL[4]; ?></span></td>
  <td><? echo $rowAL[10]; ?></td>
  <td style="text-align: center;"><a href="#" class="chooseTask" task-id="<? echo $rowAL[0]; ?>"><i class="fa fa-pencil-square-o"></i></a></td>
  </td>
</tr>

如果我单击最后一列中的链接，我会使用 Ajax （jQuery） 在此表下方打开一个div 以显示整个数据集。在div 中，我有一个按钮可以从 MySQL 表中删除此选定的数据。删除按钮上的链接由jQuery驱动以调用删除处理程序（PHP）。好的，这很好用。

我想知道的是直观地从表中删除该行。但是我不明白，我怎么能找到并调用我之前点击的正确行来调用数据集。我希望你明白我的意思。

那么，我应该在我的完成函数中写什么呢？

在这里打开数据集的JS是：

$(function(){
    $('.chooseTask').click(function(e){



        $.ajax({
            type: 'get',
            url: 'handle.selectTask.php',
            data: 'id='+elem.attr('task-id'),
            beforeSend: function() {
                //parents.animate({'backgroundColor':'#00a65a'},300);
                //parents.animate({'backgroundColor':'transparent'},300);
                //elem.animate({'backgroundColor':'#00a65a'},400);
                //elem.animate({'backgroundColor':'#367fa9'},400);

            }
            }).done(function (data) {

        // Neue Items anfügen:
        $('#message').html(data);
        $( "#progress" ).fadeIn( 10 ).delay( 200 ).fadeOut( 10 );

}).fail(function() {
    // Bei Fehler
    alert("Fehler!");
}) 
});
});

您可以在删除按钮上放置事件侦听器，找到父行并将其删除。

$( '#your-table' ).on( 'click', 'a.delete-button', function ( e ) {
  e.preventDefault();
  var $deleteButton = $( this ),
      $row = $deleteButton.closest( 'tr' );
  $row.remove();
})
相关文章：