淡出和删除表格行

Posted 2023-03-05

【中文标题】淡出和删除表格行

【英文标题】：FadeOut and Remove Table Row

【发布时间】：2011-11-06 06:10:43

【问题描述】：

我知道以前有人问过这个问题，但我似乎遇到了与以前解决过的问题不同的问题。我有一个表，我希望每一行都有一个删除链接，该链接使表行淡出，然后从 DOM 中删除表行。我的第一个问题是我无法让 jQuery fadeOut 效果在表格行上工作，并且发现您必须在行的 td 元素上实际调用 fadeOut。所以，这是我的 jjavascript：

$('span.deleteItem').live('click', function()   
    $(this).closest('tr').find('td').fadeOut('fast', 
        function() 
            $(this).parents('tr:first').remove();                    
        );    

    return false;
);

span 元素位于 td 内，因此我在单击它时找到最近的 tr 元素，然后将fadeOut 函数放在它的每个 td 元素上。这很好用。

问题在于，在回调函数中，“this”实际上是在引用窗口元素，而不是隐藏的单个 td 元素。据我了解，“this”应该是指淡出的元素。

有什么想法吗？

【问题讨论】：

jsfiddle.net/TBMnZ 适合我...

【参考方案1】：

获取“this”引用并将其传递：

$('span.deleteItem').live('click', function()   
    var here = this;
    $(this).closest('tr').find('td').fadeOut('fast', 
        function(here) 
            $(here).parents('tr:first').remove();                    
        );    

    return false;
);

【参考方案2】：

我想这就是你要找的：

$('span.deleteItem').live('click', function()  
    var tableRow = $(this).closest('tr');
    tableRow.find('td').fadeOut('fast', 
        function() 
            tableRow.remove();                    
        
    );
);

编辑：我认为Opatut is right，如他的jsFiddle 所示。