为什么这个未定义的内容会一直出现在我的演示中?

时间:2011-07-07 04:31:04

标签: javascript jquery

这里采用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="";
} 
 }

2 个答案:

答案 0 :(得分:0)

此处查看此更新的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');

} 
}

答案 1 :(得分:0)

两件事:

1)将mytrs分配给一个空字符串,因为它是未定义的,所以如果没有数据点,它仍然会尝试将其附加到html ..这会增加1 undefined:

var mytrs = '';

2)您将mytrs+=mytr[i];附加到ifcheck之外,因此未分配任何内容且未定义。

改变这两件事似乎已经解决了。