爲什麼這個undefined不斷出現在我的演示中？

Question

這裏採取任何複選框的look

點擊，你會看到undefined

我的代碼

$('#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=""; 
} 
if(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=""; 
} 
} 

Answer 1

這裏檢查此更新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'); 

} 
} 

Answer 2

兩件事情：

1）分配mytrs爲一個空字符串，因爲它代表它是不確定的，所以如果有它仍嘗試它添加到HTML中沒有數據點..這增加了1未定義：

var mytrs = ''; 

2）要追加mytrs+=mytr[i]; ifcheck之外，所以它沒有分配任何東西，並且是未定義的。

改變這兩件事似乎已經修復了它。