23

我有一张桌子

<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>

我使用这个 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();
        });
    });
});

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

4

5 回答 5

59

该行已被删除，但由于单击会使您跟随链接，因此在刷新页面时会立即恢复。

在回调的末尾添加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仍然会找到。

于 2013-03-24T21:21:12.613 回答
3

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

<a class="deleteLink" href="" >delete</a>

应该

<a class="deleteLink" href="#" >delete</a>

或者

return false;

在你的最后

$(document).ready(function() {
    $("#favoriteFoodTable .deleteLink").on("click",function() {
        ...
        return false;
    });
});
于 2013-03-24T21:30:06.320 回答
2

这是另一种选择。

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(); 
       }
    });
 }
于 2014-02-12T12:48:18.890 回答
0

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

$("#data tr").click(function() {
    var selected = $(this).hasClass("highlight");
    $("#data tr").removeClass("highlight");
    if(!selected)
            $(this).addClass("highlight");
于 2017-01-10T13:37:25.570 回答
-1

尝试

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

为我工作！

于 2018-07-13T18:28:29.057 回答