多次使用jquery附加表

时间:2013-04-05 11:35:03

标签: jquery html

这是我的jquery函数

var status; 
$('.status').click(function(e) {
     status= $(this).attr('id');                    
     //$('#test').html('<p>Scrolled: '+ status +'</p>');                
     callAjax();
     display();
});  

上面的这个函数获取点击的超级引用的id并将其存储在变量中。 并调用其他功能。

 var id = [];
 var values = [];
 function callAjax(){            
     id = [];
     values = [];
     $("#"+ status +"> td").each(function(index){                
     id.push($(this).attr("id"))
     values.push($(this).text());
     //alert($(this).attr("id")+" "+$(this).text());                          
  });           
}

上面的这个函数从行中检索所有值并将其存储在数组中。使用此数组值我将创建一个新表并将其显示在单击的超链接下面(其div存储状态变量)

  function display(){               
            $("#"+status).append('<table id="newtable" border="1"> <tr> <td>'+values[0]+'</td><td>'+values[1]+'</td></tr></table>');
  }

在display()函数中,当我第一次将表附加到其工作正常时,但再次单击链接时,它会再添加一个表。

输出

enter image description here

这里当我第一次点击链接时它正确地显示了表格,但是当我点击相同的链接时,它附加了同一个表格,第二个问题是当我点击其他链接时,第一个表格应该消失。

帮助...

3 个答案:

答案 0 :(得分:2)

试试这个

function display(){ 
       $("#newtable").remove();   //removes table tag        
    $("#"+status).append('<table id="newtable" border="1"> <tr> <td>'+values[0]+'</td>                             <td>'+values[1]+'</td></tr></table>');
    }

答案 1 :(得分:1)

在追加之前清除$("#"+status)

 function display(){       
 $("#"+status).clear();      
 $("#"+status).append('<table id="newtable" border="1">
               <tr> <td>'+values[0]+'</td><td>'+values[1]+'</td></tr></table>');
        }

或@juhana在评论中提及

  function display(){       
     $("#"+status).html('<table id="newtable" border="1">
               <tr> <td>'+values[0]+'</td><td>'+values[1]+'</td></tr></table>');
            }

答案 2 :(得分:0)

首先你清除div并附加div.append意思只是追加你给出的wat:在div中包含text1意味着如果你追加test2意味着它会附加测试1 test2就像明智的你jsust清除div和追加值

 function display(){   
                $("#"+status).empty();          
                $("#"+status).append('<table id="newtable" border="1"> <tr> <td>'+values[0]+'</td><td>'+values[1]+'</td></tr></table>');
            }