Comment faire pour modifier et mettre à jour <td> valeur lorsque vous double-cliquez sur Jquery

J'ai écrit mon code tel que lorsque l'utilisateur double clique sur un <td> élément je suis:

  • ajoutant suis <input> de type="text"
  • l'ajout d'une valeur à mettre à jour si l'utilisateur clique sur entrer

Voici mon problème:


Si l'utilisateur double clique sur <td> et clique sur un autre <td> sans en appuyant sur entrée, j'ai besoin de l'initiale <td>'s <input> être réinitialisé à la valeur précédente.

//Selecting the table <th> odd elements
$("#div table td").dblclick(function(){
    var currentEle = $(this);
    var value = $(this).html();
    updateVal(currentEle, value);
});

function updateVal(currentEle, value)
{
    $(currentEle).html('<input class="thVal" type="text" value="'+value+'" />');
    $(".thVal").focus();
    $(".thVal").keyup(function(event){
        if(event.keyCode == 13){
            $(currentEle).html($(".thVal").val().trim());
        }
    });

    $('body').not(".thVal").click(function(){
        if(('.thVal').length != 0)
        {
            $(currentEle).html($(".thVal").val().trim());
        }
    });
}

S'il vous plaît aider moi.
Je ne veux pas utiliser jeditable datatable.

veuillez prendre un coup d'oeil à ceci : archive.plugins.jquery.com/project/Editable

OriginalL'auteur vvr02 | 2013-02-07