jquery用fadein / fadeout替换表中的行

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

最好从DOM中完全删除旧的<tr>，并在其位置添加一个新的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); }); 。这应该有效：

{{1}}

这是一个jsFiddle＆gt; 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. 使用jQuery的.contents()方法获取行的内容，

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