jquery - jquery用淡入/淡出替换表中的行

Question

我有一个表，我想在 ajax 更新完成后更新其中的一行。这些行都有一个 id，它是订单的行号。我尝试了各种各样的事情，但没有快乐。

这是当前命令...

wsHtml += '<tr id="idLine'+data[0].ORDS1_LINE+'">';
wsHtml += '<td class="RightNoWrap"  >' + data[0].ORDS1_LINE + '</td>';
.....
wsHtml += '</tr>';

$('#idLine'+data[0].ORDS1_LINE).fadeOut(1000,function(){ $(this).html(wsHtml).fadeIn(1000); });

谢谢

Answer 1

您最好<tr>从 DOM 中完全删除旧的，并在其位置添加一个新的。这应该有效：

var the_new_row = $('<tr id="idLine'+data[0].ORDS1_LINE+'">\
                         <td class="RightNoWrap"  >' + data[0].ORDS1_LINE + '</td>\
                     </tr>');

$('#idLine' + data[0].ORDS1_LINE).fadeOut(1000, function() { 
    the_new_row.insertAfter($(this)).hide();
    $(this).remove();
    the_new_row.fadeIn(1000);
});

这是一个 jsFiddle > http://jsfiddle.net/ckvgu/

Answer 2

wsHtml 应该只包含元素的 innerHTML。所以你不需要附加 tr 标签，

如果您的代码有效，您可以获得这样的结果，

<tr id="idLine223">
<tr id="idLine223">
<td class="RightNoWrap">223</td>
</tr>
</tr>

解决方案：

删除附加 tr 标记的行。

wsHtml += '<td class="RightNoWrap"  >' + data[0].ORDS1_LINE + '</td>';
.....

Answer 3

TR 行不能直接设置动画。我建议您执行以下步骤：

1. 动态创建一个具有相同样式的单行表，并将其放置在应该动画的行上。

2. .contents()用jQuery的方法获取行的内容，

3. 将内容附加到新创建的表中
4. 动画和更改此表的内容，
5. 然后将内容重新绑定到其相关行并删除临时表。