Why does this undefined keep appearing in my demo?

Here take a look

Click on any of the checkboxes and you will see undefined

my code

    $('#compareForm input:radio').click(function() {
        populateCompare($(this).val());
  });

function populateCompare(cmp)
{
var mytr = new Array();
var mytrs;
var i=0;
var xml=dummy1;
$('#compareContent').empty();
/*$('#compareContent').html("<table width='100%'><tr><td align='center'>Compare details being loaded</td></tr><tr><td align='center'><img src='/csm/view/include/images/loading.gif' alt='Loading'/></td></tr></table>");*/
if(cmp=="all")
{

    $(xml).find('TagResult').each(function(){
        if($(this).attr("isEqual")=="false")
        {
            mytr[i]='<tr>'+
            '<td class="different" align="left">'+$(this).attr("elementname")+'</td>'+
            '<td class="different" align="left">'+$(this).attr("value1")+'</td>'+
            '<td class="different" align="left">'+$(this).attr("value2")+'</td>'+
            '</tr>';
        }
        else
        {
            mytr[i]='<tr>'+
            '<td class="nametd" align="left">'+$(this).attr("elementname")+'</td>'+
            '<td class="value1td" align="left">'+$(this).attr("value1")+'</td>'+
            '<td class="value2td" align="left">'+$(this).attr("value2")+'</td>'+
            '</tr>';
        }

        mytrs+=mytr[i];
        i++;
    });


    $('#compareContent').empty();
    $('<div>')
    .html('<table id="compareTable" cellspacing="0" cellpadding="0">'+
            '<tr>'+
                '<th align="center">Name</th>'+
                '<th align="center">Config1</th>'+
                '<th align="center">Config2</th>'+
            '</tr>'+mytrs

        +'</table>')
    .appendTo('#compareContent');
    i=0;
    mytrs="";
} 
i开发者_开发技巧f(cmp=="diff")
{
    console.info(cmp);
    $(xml).find('TagResult').each(function(){
        if($(this).attr("isEqual")=="false")
        {
            mytr[i]='<tr>'+
            '<td class="different" align="left">'+$(this).attr("elementname")+'</td>'+
            '<td class="different" align="left">'+$(this).attr("value1")+'</td>'+
            '<td class="different" align="left">'+$(this).attr("value2")+'</td>'+
            '</tr>';
        }
        mytrs+=mytr[i];
        i++;
    });


    $('#compareContent').empty();
    $('<div>')
    .html('<table id="compareTable" cellspacing="0" cellpadding="0">'+
            '<tr>'+
                '<th align="center">Name</th>'+
                '<th align="center">Config1</th>'+
                '<th align="center">Config2</th>'+
            '</tr>'+mytrs

        +'</table>')
    .appendTo('#compareContent');
    i=0;
    mytrs="";
} 
 }

Here check this updated example

    function populateCompare(cmp)
{
var mytr = new Array();
var mytrs="";    // changed to =""
var i=0;
var xml=dummy1;
$('#compareContent').empty();
$('#compareContent').html("<table width='100%'><tr><td align='center'>Compare details being loaded</td></tr><tr><td align='center'><img src='/csm/view/include/images/loading.gif' alt='Loading'/></td></tr></table>");
if(cmp=="all")
{

    $(xml).find('TagResult').each(function(){
        if($(this).attr("isEqual")=="false")
        {
            mytr[i]='<tr>'+
            '<td class="different" align="left">'+$(this).attr("elementname")+'</td>'+
            '<td class="different" align="left">'+$(this).attr("value1")+'</td>'+
            '<td class="different" align="left">'+$(this).attr("value2")+'</td>'+
            '</tr>';
            mytrs+=mytr[i++]; //added this
        }
        else
        {
            mytr[i]='<tr>'+
            '<td class="nametd" align="left">'+$(this).attr("elementname")+'</td>'+
            '<td class="value1td" align="left">'+$(this).attr("value1")+'</td>'+
            '<td class="value2td" align="left">'+$(this).attr("value2")+'</td>'+
            '</tr>';
            mytrs+=mytr[i++];   //added this
        }

    });


    $('#compareContent').empty();
    $('<div>')
    .html('<table id="compareTable" cellspacing="0" cellpadding="0">'+
            '<tr>'+
                '<th align="center">Name</th>'+
                '<th align="center">Config1</th>'+
                '<th align="center">Config2</th>'+
            '</tr>'+mytrs

        +'</table>')
    .appendTo('#compareContent');

} 
if(cmp=="diff")
{

    $(xml).find('TagResult').each(function(){
        if($(this).attr("isEqual")=="false")
        {
            mytr[i]='<tr>'+
            '<td class="different" align="left">'+$(this).attr("elementname")+'</td>'+
            '<td class="different" align="left">'+$(this).attr("value1")+'</td>'+
            '<td class="different" align="left">'+$(this).attr("value2")+'</td>'+
            '</tr>';
            mytrs+=mytr[i++];  //added this
        }


    });


    $('#compareContent').empty();
    $('<div>')
    .html('<table id="compareTable" cellspacing="0" cellpadding="0">'+
            '<tr>'+
                '<th align="center">Name</th>'+
                '<th align="center">Config1</th>'+
                '<th align="center">Config2</th>'+
            '</tr>'+mytrs

        +'</table>')
    .appendTo('#compareContent');

} 
}

Two things:

1) Assign mytrs to an empty string because as it stands it's undefined so if there's no data point it still tries to append that to the html.. which adds 1 undefined:

var mytrs = '';

2) You're appending mytrs+=mytr[i]; outside the ifcheck so it's not assigned anything and is undefined.

Changing those two things seems to have fixed it.