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

I tested your code in jsfiddle and it seems to work - jsfiddle.net/NzJpA — Richard Dalton
– Richard Dalton, Commented Nov 16, 2011 at 10:08
@Richard D Same, unable to reproduce the issue jsfiddle.net/vjmPJ — Niklas
– Niklas, Commented Nov 16, 2011 at 10:12
@ShawnTaylor I'm guessing you are using firefox? That's the only way I can reproduce it. btw, you have an extra </td> in your example, that's not causing the problem though. — Richard Dalton
– Richard Dalton, Commented Nov 16, 2011 at 11:04

Richard Dalton · Accepted Answer · 2011-11-16 11:10:13Z

3

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/

answered Nov 16, 2011 at 11:10

Richard Dalton

35.8k6 gold badges75 silver badges92 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Shawn Taylor Over a year ago

I'll test that code in my office. But I have tried another variant and it produces same (old) results jsfiddle.net/NzJpA/4

Shawn Taylor Over a year ago

ah.. bad I cannot add rep too.. :)

Richard Dalton Over a year ago

@ShawnTaylor That other variant doesnt work because it is still hiding before appending.

Shawn Taylor Over a year ago

One more questions arises.. jQuery doesn't suppose to handle cross-browser issue like this one? (though its very simple one).

Richard Dalton Over a year ago

I guess not. You could always raise a bug and see if they can fix it.

Reporter · Accepted Answer · 2011-11-16 10:04:54Z

3

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.

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

Have fun with FireFox and Firebug

answered Nov 16, 2011 at 10:04

Reporter

3,9345 gold badges36 silver badges50 bronze badges

Collectives™ on Stack Overflow

jQuery table append issue

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related