Comment mettre à jour une ligne de table avec le bouton Enregistrer en utilisant .ajax

Question

J'ai une table qui a une ligne et une seule cellule sera modifiable. J'ai accompli ceci avec le code suivant.

$("td#effEndDate").click(function() { 
      if (!$(this).hasClass("edit")) { 
       var value = jQuery.trim($(this).html()); 
       $(this).html("<input id=\"txtEdit\" type=\"text\" value=\"" + value + "\" />"); 
       $(this).addClass("edit"); 
       $("#txtEdit").focus(); 
      } 
     }); 

Maintenant, c'est la partie où je suis bloqué.

Une fois le champ est mis à jour un bouton de sauvegarde doit être cliqué pour appeler la méthode appropriée .ajax de mettre à jour la base de données. Mais comment puis-je comparer la valeur précédente à la valeur actuelle sur un bouton? Puisque je n'utilise pas la propriété onblur où j'aurais pu sauvegarder l'ancienne valeur et la passer à la fonction de mise à jour.

Answer 1

Il y a deux possibilités.

• passer la variable autour entre les fonctions
• Faire la variable globale

si vous voulez que le mot-clé variable globale ne pas utiliser le "var"

Change:

var value = jQuery.trim($(this).html()); 

à ceci:

value = jQuery.trim($(this).html()); 

Modifier

Si la fonction de clic est d'être frappé plus d'une fois avant de rafraîchir la page et vous supposant que vous voulez conserver une copie des lignes de table d'origine, vous pouvez essayer. Enregistrer une copie de la table d'origine dans une variable, puis vous pouvez interroger la table d'origine pour le code HTML en utilisant le numéro d'identification. Voici une maquette

rapide premier magasin de la table dans une variable sur le chargement de la page. Cela permettra d'économiser une copie originale de la table

//get a copy of the table 
var GetCopyofOriginalTable = function() { 
     var TableToBeCopied = $('the appropriate selector'); 
     CopyOfTable = JQuery.extend(true, {}, TableToBeCopied); //Notice no var, its global 
} 

//Now store the variale 
GetCopyofOriginalTable(); 

var FindTableRowByID = function(trID) { 
     return $('table:has(tr#' + trID)); 
} 

Maintenant, vous pouvez boucle à travers la nouvelle table tester sa valeur agaisnt l'ancienne table. Cette méthode fait beaucoup de mémoire en fonction de la taille de la table.

Answer 2

Je stockerait la valeur d'origine quelque part dans une variable et comparer les deux dans la fonction de soumission avant d'envoyer l'appel .ajax.