jQuery: FadeOut не работает со строками таблицы - PullRequest
Новая
       30

jQuery: FadeOut не работает со строками таблицы

20 голосов
/ 03 июня 2009

У меня есть следующая 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".

Может ли кто-нибудь подсказать мне, как это исправить?

Ответы [ 5 ]

40 голосов
/ 03 июня 2009

Проблема в jQuery при скрытии trs. Это текущий обходной путь, пока они не сделают что-то подобное в ядре, если они решат. 

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

Это в основном скрывает tds в строке вместо фактической строки. Затем он удаляет строку из DOM. Это работает во всех браузерах, я верю. Вы можете использовать IE специально, если нужно.

5 голосов
/ 24 августа 2009

Хотя решение Jab - это решение проблемы, оно содержит ошибку. В частности, ваша функция обратного вызова для удаления родительского элемента будет запускаться один раз для каждого элемента '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, потому что я просто хочу скрыть / показать ее, но ее довольно легко адаптировать.

2 голосов
/ 18 октября 2012

Jquery теперь можно использовать так: 

$("#id_of_your_tr").fadeOut(1000);
0 голосов
/ 28 декабря 2014

Начиная с jquery 1.6 вы можете использовать обещания для выполнения одного обратного вызова после завершения всех td анимаций. 

$('td', row).each(function() {
    $(this).fadeOut('slow', 'linear');
})
.promise()
.done(function() {
    $(this).parent('tr').remove();
});
0 голосов
/ 03 июня 2009

Эти две вещи разные:

  • Скрытие строки с помощью 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();
    });
  });
};

В основном это говорит:

  • GET RemoveCart.aspx на сервере с заданными параметрами;
  • Когда эта функция вернется, начните затухание строки в течение одной секунды;
  • После завершения fadeOut удалите его из DOM.
...