jQuery table append issue

Question

I am trying to achieve a functionality so that new data appears in new column and its appended to the row with fading effect.

Following is my code

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>

But problem is that World doesn't work as intended and 'World' is displayed below the first appended cell instead of appearing right of it in new column so that it looks like "Hello World".

I am also looking for any tool which can show the live html of a page which can show all the changes jQuery makes to html?

**Update I have attached following image .. which shows 'World' below 'Hello' while it should be in right cell (new column) of 'Hello'.

Oops.. I am not allowed to post image.. please check this http://s11.postimage.org/onoxssoab/table.png

Answer 1

I am also looking for any tool which can show the live html of a page which can show all the changes jQuery makes to html?

If you have installed the browser 'Firefox' you can use the most popular plugin 'Firebug'. After the installation of that, press F12 and open the console panel. Use 'Inspect' element to watch your element and you can see the changes at runtime.

PS: Firebug provide several different tools for Development with html, CSS and Javascript.

Have fun with FireFox and Firebug

Answer 2

It appears that in firefox when you hide the new cells before appending them it causes then to get the css style display: block when shown. This causes them to render incorrectly.

To get around this, append the cells and then hide and fade in:

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

Working example - http://jsfiddle.net/NzJpA/2/