使用jQuery删除visualy表行

时间:2016-03-14 19:50:17

标签: javascript jquery html

我有一个html结构,显示来自MySQL-Table的数据:

<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-Table中删除这些选定的数据。删除按钮上的链接是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!");
}) 
});

});

1 个答案:

答案 0 :(得分:4)

您可以在删除按钮上放置一个事件侦听器,找到父行,然后将其删除。

$( '#your-table' ).on( 'click', 'a.delete-button', function ( e ) {
  e.preventDefault();

  var $deleteButton = $( this ),
      $row = $deleteButton.closest( 'tr' );

  $row.remove();
})