jquery删除表行

我有一张桌子

 fetch()) { ?> 
 
 Food Name: 
 
 Restaurant Name: 
 
 
 
  
 
  
 
 delete 
 
   

我使用这个jquery函数，所以当用户点击删除时，行的背景将会改变，然后行将被删除

 $(document).ready(function() { $("#favoriteFoodTable .deleteLink").on("click",function() { var td = $(this).parent(); var tr = td.parent(); //change the background color to red before removing tr.css("background-color","#FF3700"); tr.fadeOut(400, function(){ tr.remove(); }); }); }); 

只是背景正在改变，但行没有删除，为什么？ 怎么解决？

Answer 1

该行已删除，但由于点击使您按照链接进行操作，因此在刷新页面时会立即恢复该行。

添加return false; 或event.preventDefault(); 在回调结束时阻止默认行为：

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

示范

请注意，我使用closest的代码来获得更可靠的代码：如果其他元素介于两者之间，则仍会找到tr 。

Answer 2

你忘记做的是在你的链接中设置哈希。 例：

 delete 

应该

 delete 

要么

 return false; 

在你的结尾

 $(document).ready(function() { $("#favoriteFoodTable .deleteLink").on("click",function() { ... return false; }); }); 

Answer 3

这是另一种选择。

 function DeleteRowOfProductTable(productID){ $('#YourTableId tr').each(function (i, row) { var $row = $(row); var productLabelId = $row.find('label[name*="Product_' + productID + '"]'); var $productLabelIdValue = $productLabelId.text(); if (parseInt(productID) == parseInt($productLabelIdValue)) { $row.remove(); } }); } 

Answer 4

如果您希望一次只选择表中的一行

 $("#data tr").click(function() { var selected = $(this).hasClass("highlight"); $("#data tr").removeClass("highlight"); if(!selected) $(this).addClass("highlight"); 

Answer 5

尝试

 var tr = $(this).closest('tr'); tr.detach(); 

为我工作！