javascript - jQuery 表追加问题

Question

我正在尝试实现一种功能，以便新数据出现在新列中并将其附加到具有淡入淡出效果的行。

以下是我的代码

JS

<script type="text/javascript">
$(document).ready(function () {
    $.ajax({url:"server.php", success:function(data){     
       $("div").html(data);
       var count = 1;
       var obj = jQuery.parseJSON(data);
       $.each(obj.result, function() {  
           var html = "<td>Hello </td><td>World</td>"; //"<td>"+ this.fruit.apple +"</td><td>hello</td>";
           $(html).hide().appendTo("table tr#cell"+count).fadeIn(1000);
           count += 1;  
       });
    }}); 
});
</script>

HTML

<table border="1">
  <tr id="cell1"><td>row 1, cell 1</td><td>row 1, cell 2</td></tr>
  <tr id="cell2"><td>row 2, cell 1</td><td>row 2, cell 2</td></tr>
  <tr id="cell3"><td>row 3, cell 1</td><td>row 3, cell 2</td></tr>
  <tr id="cell4"><td>row 4, cell 1</td><td>row 4, cell 2</td></tr>
  <tr id="cell5"><td>row 5, cell 1</td><td>row 5, cell 2</td></tr>
  <tr id="cell6"><td>row 6, cell 1</td><td>row 6, cell 2</td></tr>
  <tr id="cell7"><td>row 7, cell 1</td><td>row 7, cell 2</td></tr>
  <tr id="cell8"><td>row 8, cell 1</td><td>row 8, cell 2</td></tr>
  <tr id="cell9"><td>row 9, cell 1</td><td>row 9, cell 2</td></tr>
  <tr id="cell10"><td>row 10, cell 1</td><td>row 10, cell 2</td></td></tr>
</table> 
<div></div>

但问题是 World 没有按预期工作，“World”显示在第一个附加单元格下方，而不是在新列中出现在它的右侧，因此它看起来像“Hello World”。

我也在寻找任何可以显示页面的实时 html 的工具，它可以显示 jQuery 对 html 所做的所有更改？

**更新我附上了以下图片 .. 它显示了“Hello”下方的“World”，而它应该位于“Hello”的右侧单元格(新列)中。

哎呀..我不允许张贴图片..请检查这个http://s11.postimage.org/onoxssoab/table.png

Answer 1

似乎在 firefox 中，当您在附加新单元格之前隐藏它们时，它会导致在显示时获得 css 样式 display: block。这会导致它们呈现不正确。

要解决这个问题，附加单元格然后隐藏并淡入:

$.each(obj.result, function() {  
    var html = "<td>Hello </td><td>World</td>"; 
    $(html).appendTo("table tr#cell"+count).hide().fadeIn(1000);
    count += 1;  
});

工作示例 - http://jsfiddle.net/NzJpA/2/