Question

我正在尝试只删除一行，但有时没有任何反应，有时整个表（但标题）都会被删除。

// This is the code I'm using in my php file:
<table class="table table-striped table-hover " id="tb_people">
  <thead>
    <tr>
      <th style="width: 25px;">#</th>
      <th>Name</th>
      <th>Email</th>
      <th>Delete</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

我的jquery代码，使用下面的代码，我在表中插入一行：

counter = counter + 1;
$("#tb_people").find('tbody')
  .append($('<tr id="' + counter + '">')
    .append($('<td>')
      .append($('<b>')
        .text(counter)
      )
    )
    .append($('<td>')
      .append($('<b>')
        .text($("#inputPerson").val())
      )
    )
    .append($('<td>')
      .append($('<b>')
        .text($("#inputEmail").val())
      )
    )
    .append($('<td>')
      .append($('<a class="deleteLink" href="">Delete</a>'))
    )
  );

这是我用来删除一行的代码。使用以下两个选项中的任何一个，它都是相同的：

$(".deleteLink").on("click", function(){
   $(this).closest('tr').remove();
   return false;
});

另一种方式：

$(".deleteLink").on("click", function(){
    var tr = $(this).closest('tr');
    tr.css("background-color","#FF3700");
    tr.fadeOut(400, function(){
       tr.remove(); 
    });
    return false;
});

如果我将符号＃添加到链接（href），则没有任何反应：

.append($('<a class="deleteLink" href="#">Delete</a>'))

Answer 1

您需要使用委托事件处理程序，因为.deleteLink元素在加载后会动态附加到页面。试试这个：

$("#tb_people").on('click', '.deleteLink', function(e) {
   e.preventDefault();
   $(this).closest('tr').remove();
});

Answer 2

您可以使用从表格中淡出记录等效果删除记录。请尝试此

$(document).ready(function() {    
    $("#sample tr").click(function() {
        //change the background color to red before removing
        $(this).css("background-color","#FF3700");

        $(this).fadeOut(400, function(){
            $(this).remove();
        });
    });});

Answer 3

我不确定，但您可以在每一行中删除以下方法

<a class="deleteLink" href="javascript:void(0)" onclick="$(this).parent().parent().remove();">Delete</a>

从表中删除一行。我的代码删除整个表

3 个答案: