I have written my code such that when user double clicks on a <td> element I am:

• appending am <input> of type=text


• adding a value to it and update it if the user clicks on enter

Here is the my problem:


If user double clicks on <td> and clicks on another <td> without pressing enter, I need the initial <td>'s <input> to be reset to previous value.

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

        }

    });

}

Please help me.
I don't want to use jeditable datatable.