Actualiser la table après l'utilisation de jQuery .append()

Question

Le code suivant obtient un objet JSON, puis crache son contenu dans un <table>. La première fois que je le fais, je reçois très bien mon contenu JSON. Cependant, lorsque je me rafraîchis, les données actualisées sont collées au bas de ma table. Comment puis-je actualiser les données pour afficher uniquement les nouvelles données? J'ai essayé d'utiliser .remove() mais il y avait une suppression évidente, puis un rafraîchissement des données.

$(function() { 
     $('#ReportedIssue').change(function() { 
      //$('.data').remove() 
      $.getJSON('/CurReport/GetUpdatedTableResults', function(json) { 
       for (var i = 0; i < json.GetDocumentResults.length; i++) { 
        $('#DocumentInfoTable').append(
         "<tr class='data'>" + 
         "<td>" + json.GetDocumentResults[i].Document.DocumentId + "</td>" + 
         "<td>" + json.GetDocumentResults[i].Document.LanguageCode + "</td>" + 
         "<td>" + json.GetDocumentResults[i].ReportedIssue + "</td>" + 
         "<td>" + json.GetDocumentResults[i].PageNumber + "</td>" + 
         "</tr>" 
        ); 
       }; 
      }); 
     }); 
    }); 

Merci,

Aaron

Answer 1

Il sera plus efficace pour construire le HTML comme suit (et bien sûr, résout le problème que vous rencontrez):

$(function() { 
    $('#ReportedIssue').change(function() { 
     //$('.data').remove() 
     $.getJSON('/CurReport/GetUpdatedTableResults', function(json) { 
      var str = ''; 
      for (var i = 0; i < json.GetDocumentResults.length; i++) { 
       str += "<tr class='data'>" + 
        "<td>" + json.GetDocumentResults[i].Document.DocumentId + "</td>" + 
        "<td>" + json.GetDocumentResults[i].Document.LanguageCode + "</td>" + 
        "<td>" + json.GetDocumentResults[i].ReportedIssue + "</td>" + 
        "<td>" + json.GetDocumentResults[i].PageNumber + "</td>" + 
        "</tr>" 
      }; 

      $('#DocumentInfoTable').html(str); 
     }); 
    }); 
});