jQuery jquery删除表行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15604122/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery delete table row
提问by user2059935
I have a table
我有一张桌子
<table id="favoriteFoodTable">
<th>
Food Name:
</th>
<th>
Restaurant Name:
</th>
<th>
</th>
<?php while ($row = $foods->fetch()) {
?>
<tr>
<td>
<?php echo $row['foodName']; ?>
</td>
<td>
<?php echo $row['restaurantName']; ?>
</td>
<td>
<a class="deleteLink" href="" >delete</a>
</td>
</tr>
<?php } ?>
</table>
I use this jquery function so when a user click on delete, the background of the row will change and the row then will 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();
});
});
});
just the background is changing but the row is not deleted, why? how to solve?
只是背景在改变，但行没有被删除，为什么？怎么解决？
回答by Denys Séguret
The row is deleted but as clicking makes you follow the link, it's immediately restored when the page is refreshed.
该行被删除，但由于单击使您跟随链接，因此页面刷新时它会立即恢复。
Add return false;or event.preventDefault();at the end of the callback to prevent the default behavior :
在回调末尾添加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;
});
});
Note that I used closestfor a more reliable code : if another element comes in between, the trwill still be found.
请注意，我用于closest更可靠的代码：如果另一个元素介于两者之间，tr仍然会被找到。
回答by migontech
What you forgot to do is to set hash in your link. example:
您忘记做的是在链接中设置哈希。例子：
<a class="deleteLink" href="" >delete</a>
should be
应该
<a class="deleteLink" href="#" >delete</a>
or
或者
return false;
at end of your
在你的最后
$(document).ready(function() {
$("#favoriteFoodTable .deleteLink").on("click",function() {
...
return false;
});
});
回答by Developer
Here is another option.
这是另一种选择。
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();
}
});
}
回答by Hasnain Mehmood
If you want only 1 row in the table to be selected at a time
如果您只想一次选择表格中的 1 行
$("#data tr").click(function() {
var selected = $(this).hasClass("highlight");
$("#data tr").removeClass("highlight");
if(!selected)
$(this).addClass("highlight");
回答by Alberi De Paula
Try
尝试
var tr = $(this).closest('tr');
tr.detach();
Worked for me!
为我工作！
