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”下方的右单元格（新列）中显示了“ Hello”下方的“ World”。

糟糕，我不允许发布图片。.请检查此http://s11.postimage.org/onoxssoab/table.png

Answer 1

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

如果您已安装浏览器“ Firefox”，则可以使用最受欢迎的插件“ Firebug”。 安装完成后，按F12并打开控制台面板。 使用“检查”元素来监视您的元素，您可以在运行时看到更改。

PS：Firebug为html，CSS和Javascript提供了几种不同的开发工具。

玩转FireFox和Firebug

Answer 2

似乎在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/