Cannot insert table rows in IE8, why?

Cannot insert table rows in IE8, why?

Hello all,

This is my first question here, I would like to know what is wrong here that table rows/cols are not being inserted when using IE8, in FF and Chrome it works fine:

What am I doing wrong?
  1. var listFriends = eval(data.list);
    var col = 0;
    var ie8 = browser.isIE8;

    var tr = $('<tr>');
    tableFriends.find('tbody').remove(); // clear table rows
    $.each(listFriends, function(index){
        var contr = col % 6;
        if (contr== 0){ // new table row
            tableFriends.append(tr);
            tr = $('<tr>');
        }
        col++;
        var item = listFriends[index];
        var name = item.name;
        var friendID = item.friendID;
        var thumb = item.thumb;
        var online = eval(item.online); // true or false

        var td = $('<td>');
        td.attr({'align':'center', 'valign':'bottom', 'class':'friend-box', 'id':'box-friend_'+friendID});
        var borderColor = online ? '#003F00':'#EF0000';

        var img = $('<img src="'+thumb+'" style="border: 2px solid '+borderColor+'; background-color:white; padding:5px; " alt="'+name+'" />').jScale({w:'50%'}).css({"opacity":"0.8"});
        img.hover(function(){
            $(this).css({"opacity":"110.0"});
        },function(){
            $(this).css("opacity","0.8");
        });

        var status = online ? '<span><b>Online<b></span>' : '<span><b>Offline<b></span>';
        td.qtip({
            content: '<div><b>'+name+'</b> está '+status+'</div>', // Give it some content
            /*position: 'bottomLeft', // Set its position*/
            position: {
                corner: {
                    tooltip: 'topMiddle', // Use the corner...
                    target: 'bottomMiddle' // ...and opposite corner
                }
            },
            hide: {
                fixed: 'click' // Make it fixed so it can be hovered over
            },
            style: {
                padding: '5px 10px', // Give it some extra padding
                name: online?'green':'red', //'cream', // And style it with the preset dark theme,
                color:'black',
                width: 200,
                tip: true
            }
        });

        var divImg = $('<div></div>').css({
            'background-image':'url('+thumb+')',
            'background-position':'center center',
            'background-color':'white',
            'border':'2px solid '+borderColor,
            'height':'60px',
            'width':'60px',
            'z-index':'1',
            'cursor':'pointer',
            'display':'block',
            'margin-left':'auto',
            'margin-right':'auto',
            'opacity':'0.8'
        });
        divImg.hover(function(){
            $(this).css({"opacity":"110.0"});
        },function(){
            $(this).css("opacity","0.8");
        });
        var link = $('<a href="javascript:void(0)" style="display:block; height:100%; width:100%" onclick="openProfilePage(\''+friendID+'\')" >');
        if(ie8){ // I tought the problem was the DIV so I tried to insert an image insteand, no good
            link.append(img);
        } else {
            link.append(divImg);
        }
        td.append(link);

        tr.append(td);
    });
    tableFriends.append(tr);