jQuery:FadeOutがテーブル行で機能しない

StackOverflow https://stackoverflow.com/questions/944110

  •  09-09-2019
  •  | 
  •  

質問

次の 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関数を呼び出すと、フェードするEffect.Itsは単に取得されません display="none" のように行を非表示にします。

誰かこれを修正する方法を教えてもらえますか?

役に立ちましたか？

解決

trsを隠すjQueryのに問題があります。彼らはコアに似た何かをするまで、彼らがすることを決定した場合、これは、現在の回避策です。

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

これは、基本的には代わりに、実際の行で、行のtdsを非表示にします。そして、それはDOMから行を削除します。それは私が信じているすべてのブラウザで動作します。あなたは、特に必要な場合にかかわらず、IEをターゲット可能性があります。

他のヒント

ジャブのソリューションは、それはバグが含まれていない問題で、ラウンドな方法であるが。具体的に親要素を除去するためのコールバック関数は、実際にそれが最後のものだけに一度発射必要がある場合、その行のすべての「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から行を削除しませんが、適応することはかなり簡単なはずです。

。

jqueryのは次のように使用することができます：

$("#id_of_your_tr").fadeOut(1000);

これら 2 つの点は異なります。

  • Hide()、fadeOut()、slideUp()、クラスの適用、CSS 値の設定、またはアニメーションによって行を非表示にします。そして
  • DOM から要素を削除します。

あなたの言うことを正しく読めば、あなたは両方をやりたいと思っています。その場合は、次のことを試してください。

function deleteItem(modelId,itemindexId, rowId) {
  $.get("RemoveFromCart.aspx", {
    model: modelId,
    cartItem: itemindexId,
    mode: "removefromcart",
    rand:Math.random()
  }, function(data) { 
    var row=$("#"+rowId);     
    row.fadeOut(1000, function() {
      row.remove();
    });
  });
};

基本的にこれは次のように言っています。

  • 指定されたパラメーターを使用してサーバー上の RemoveCart.aspx を取得します。
  • その関数が戻ったら、1 秒間かけて行のフェードアウトを開始します。
  • フェードアウトが完了したら、DOM から削除します。
所属していません StackOverflow
scroll top