java - How can I update a table using ajax? -

my problem want whenever new message gets put messages list display in table. problem i'm running can't delete old rows in table setinterval keeps adding same messages table every second or can code hornservice sends new messages when leave page , come don't have messages on list because there no messages in list.

in support.jsp have:

<table id="supportmessages" class="supporttable"> <tr>   <td class="supportcolumn">     status     </td> </tr> </table>  <script type="text/javascript"> $(document).ready(function() {   setinterval(ajaxall, 1000);   function ajaxall()   {     $.ajax     ({        url: "/horn/rest/main/getmessages",        datatype: "json",        type: "get",        success: function(json)        {          for(var = 0; < json.length; i++)          {              $('#supportmessages tr:nth-child(1)').after(               '<tr> <td>' + json[i].status + '</td> '+               '</tr>');          }        }     });   } } </script> 

and in hornservice.java have:

static list<message> messages = new arraylist<message>();  @get @path("/getmessages") public @responsebody list<message> getmessages() {   return messages; } 

and message.java:

public class message {   private string status;   public string getstatus()   {     return status;   }    public void setstatus(string status)   {     this.status = status;   } } 

i added javascript reloads rows:

$.ajax ({     url:"/horn/rest/main/getmessages",     datatype: "json",     type: "get",     success: function(json)     {        $("#supportmessages tr").remove();        $('#supportmessages').prepend('<tr> ' +              '<td class="supportcolumn"> status </td>' +              '</tr>');