jQuery:FadeOut不使用表行

Question

我将以下HTML表呈现给我的浏览器.我正在从我的ASP.NET代码隐藏文件创建此表.

<table Class="tblTradeInCart">
    <tr class="tblCartHeader">
        <td>Item</td>
        <td>Model</td>
        <td> Price</td>
        <td>Delete</td>
    </tr>
    <tr id="tr_15_1">
        <td><img src="dia/images/LGVX9700.jpg" width="50" height="50" /></td>
        <td>LG VX9700</td>
        <td>$ 122</td>
        <td><a href='#' onclick="deleteItem(15,1,'tr_15_1')"><img src='..\Lib\images\NCcross.gif' style='border:0px'></a></td>
    </tr>
    <tr id="tr_11_8">
        <td><img src="dia/images/NOK5610.jpg" width="50" height="50" /></td>
        <td>NOKIA 5610</td>
        <td>$ 122</td>
        <td><a href='#' onclick="deleteItem(11,8,'tr_11_8')"><img src='..\Lib\images\NCcross.gif' style='border:0px'></a></td>
    </tr>
    <tr id="tr_14_9">
        <td><img src="dia/images/NOKN95.jpg" width="50" height="50" /></td>
        <td>NOKIA N95</td>
        <td>$ 91.5</td>
        <td><a href='#' onclick="deleteItem(14,9,'tr_14_9')"><img src='..\Lib\images\NCcross.gif' style='border:0px'></a></td>
    </tr>
</table>

在我的JavaScript中我有删除功能如下

function deleteItem(modelId,itemindexId, rowId)
{
   $.get("RemoveFromCart.aspx",{ model:modelId,cartItem:itemindexId,mode:"removefromcart",rand:Math.random() } ,function(data)
 { 
    //document.getElementById(rowId).style.display = "none";

    var row=$("#"+rowId);     
   row.fadeOut(1000);

});

}

但是当我调用deleteItem函数时,我没有得到淡化效果.它只是隐藏行像display ="none".

任何人都可以指导我如何解决这个问题吗？

Answer 1

隐藏时jQuery中存在问题trs.这是当前的解决方法,直到他们在核心中做类似的事情,如果他们决定.

row.find("td").fadeOut(1000, function(){ $(this).parent().remove();});

这基本上隐藏tds在行中,而不是实际的行.然后它从DOM中删除该行.它适用于我认为的所有浏览器.如果需要,您可以专门针对IE.

Answer 2

虽然Jab的解决方案是解决问题的方法,但它确实包含了一个错误.具体来说,删除父元素的回调函数将为该行中的每个'td'元素触发一次,实际上它应该只针对最后一个触发一次.这可以通过向回调中发出警报调用来证明,该调用将在行中的每个td中看到一次.

我还没有找到一个非常巧妙的方法,但我最终得到了一些类似的东西:

function ShowHideTableRow(rowSelector, show, callback)
{
    var childCellsSelector = $(rowSelector).children("td");
    var ubound = childCellsSelector.length - 1;
    var lastCallback = null;

    childCellsSelector.each(function(i)
    {
        // Only execute the callback on the last element.
        if (ubound == i)
            lastCallback = callback

        if (show)
        {
            $(this).fadeIn("slow", lastCallback)
        }
        else
        {
            $(this).fadeOut("slow", lastCallback)
        }
    });
}

要调用它,你会使用这样的东西:

ShowHideTableRow("#MyTableRowId",false,function() { // do something else ONCE when the row is hidden or shown... });

注意:我的版本不会从dom中删除行,因为我只想隐藏/显示它,但它应该很容易适应.