title: How to edit and update <td> value when double click Jquery
body: <p>I have written my code such that when user double clicks on a <code>&lt;td&gt;</code> element I am:</p>
  
  <ul>
  <li>appending am <code>&lt;input&gt;</code> of <code>type="text"</code></li>
  <li>adding a value to it and update it if the user clicks on enter</li>
  </ul>
  
  <p><strong>Here is the my problem:</strong>
  <br />
  If user double clicks on <code>&lt;td&gt;</code> and clicks on another <code>&lt;td&gt;</code> without pressing enter, I need the initial <code>&lt;td&gt;</code>'s <code>&lt;input&gt;</code> to be reset to previous value.</p>
  
  <pre><code>// Selecting the table &lt;th&gt; odd elements
  $("#div table td").dblclick(function(){
      var currentEle = $(this);
      var value = $(this).html();
      updateVal(currentEle, value);
  });
  
  function updateVal(currentEle, value)
  {
      $(currentEle).html('&lt;input class="thVal" type="text" value="'+value+'" /&gt;');
      $(".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());
          }
      });
  }
  </code></pre>
  
  <p>Please help me.
  I don't want to use jeditable datatable.</p>