Appending the table using jquery multiple times

Question

This are my jquery functions

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

This function above gets id of the hyper reference clicked and stores it in a variable. and call other function.

 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());                          
  });           
}

This function above retrives all the values from row and stores it in a array.Using this array values i will create a new table and display it below the hyperlink that was clicked (whose div is stored status variable)

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

in display() function when i am first time appending the table its working fine, but when again link is clicked it appends one more table.

output

enter image description here

here when i click on link first time it displays the table correctly, but when i click the same link its appending the same table and second problem is when i click on other link first table should get disappeared.

help...

Do you want the next click replace the old table, or do you want the results to be added to the existing table? — JJJ
– JJJ, Commented Apr 5, 2013 at 11:38
This is exactly what your code says it does...append a table every time the function display gets called. Try removing any previous ones before the append. — Bas Slagter
– Bas Slagter, Commented Apr 5, 2013 at 11:39

karthick · Accepted Answer · 2013-04-05 11:55:13Z

2

Try this one

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>');
    }

edited Apr 5, 2013 at 11:55

answered Apr 5, 2013 at 11:42

karthick

6,18812 gold badges54 silver badges92 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Azuu Over a year ago

even empty replace the tag to which i want to append

karthick Over a year ago

@Azuu empty will remove all the tags inside the $("#"+status) For Reference

Azuu Over a year ago

that is what i dont want, inside this i have a <a href> which should not get empty

karthick Over a year ago

@Azuu try $("#newtable").remove()

Suresh Atta · Accepted Answer · 2013-04-05 11:37:31Z

1

Clear the $("#"+status) before appending .

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

or as @juhana mentioned in comment

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

answered Apr 5, 2013 at 11:37

Suresh Atta

122k38 gold badges206 silver badges315 bronze badges

2 Comments

JJJ Over a year ago

I suppose this works, but it would be much easier to just change .append() to .html().

Azuu Over a year ago

clear() is not working.. its not displaying the table even once and when i use .empty() it replaces the id to which i want to append.

tamilmani · Accepted Answer · 2013-04-05 11:41:18Z

first you clear the div and append the div.append mean just append the wat you giving ex:in div contains the text1 means if you append the test2 mean it ll append the test 1 test2 like wise u jsust clear the div and append the value

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

Collectives™ on Stack Overflow

Appending the table using jquery multiple times

3 Answers 3

4 Comments

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

2 Comments

Comments

Related