title: Jquery table edit row cancel button is not working properly
body: <p>I am trying to edit table row but not working properly.
  If i click the edit button then remove the textbox value then clicked the edit button showing alert to fill the text box otherwise ucer will click the cancel button previuse value i want to show but cancel button is not working properly.anybody resolve this issue. see JSFiddle for code:<a href="http://jsfiddle.net/9KEGd/191/" rel="nofollow noreferrer">http://jsfiddle.net/9KEGd/191/</a></p>
  
  <p>Js:</p>
  
  <pre><code> $(function () {
  
  $(".edit").click(function (e) {
      e.preventDefault();
      e.stopImmediatePropagation();
      var btn = $(this);
      var td = btn.closest("tr").find(".editable");
  
      var currentValue = td.text();
  
      //Save current text in td data attribute
      $(td).data("current-value", currentValue);
  
      if(btn.text() === "edit")
      {
          td.html("&lt;input type='text' value="+currentValue+" /&gt;");
          btn.html("save");
      }
      else
      {
       if(td.find("input").val()==""){
  
      alert("please fill the text box")
      }else{
           td.html(td.find("input").val());
          btn.html("edit");
          }
      }
  
  
  
  });
  
   $(".cancel").click(function (e) {
      e.preventDefault();  
      e.stopImmediatePropagation();
      var td = $(this).closest("tr").find(".editable");
  
      //Read data attribute to get saved text
      var currentValue = $(td).data("current-value");
      if(currentValue != "")
      {
          td.html(currentValue);
          $(this).parent().find(".edit").html("edit");
  
          //Set attribute to empty string
          $(td).data("current-value", "");
      }else{
  
  
      }
  });
  });
  </code></pre>
  
  <p>html:</p>
  
  <pre><code>  &lt;table id="tabledata"&gt;
    &lt;thead&gt;
      &lt;th&gt;RecID&lt;/th&gt;
      &lt;th&gt;Col1&lt;/th&gt;
      &lt;th&gt;opt&lt;/th&gt;
  &lt;/thead&gt;
  &lt;tr&gt;
  &lt;td&gt;&lt;a&gt;&lt;div class="nestedtable"&gt;Tableshowing no need edit&lt;/div&gt;&lt;/a&gt;&lt;span class="editable"&gt;RecID1&lt;/span&gt;&lt;/td&gt;
      &lt;td&gt;Val1.1&lt;/td&gt;
      &lt;td&gt;
      &lt;ul&gt;
      &lt;li&gt; &lt;a class="edit"&gt;edit&lt;/a&gt;&lt;/li&gt;
       &lt;li&gt; &lt;a class="cancel"&gt;cancel&lt;/a&gt;&lt;/li&gt; 
      &lt;/ul&gt;
  
  
      &lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
  &lt;td&gt;&lt;a&gt;&lt;div class="nestedtable"&gt;Tableshowings no need edit&lt;/div&gt;&lt;/a&gt;&lt;span class="editable"&gt;RecID2&lt;/span&gt;&lt;/td&gt;
      &lt;td&gt;Val2.1&lt;/td&gt;
      &lt;td&gt;    &lt;ul&gt;
      &lt;li&gt; &lt;a class="edit"&gt;edit&lt;/a&gt;&lt;/li&gt;
       &lt;li&gt; &lt;a class="cancel"&gt;cancel&lt;/a&gt;&lt;/li&gt; 
      &lt;/ul&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
      &lt;td&gt;&lt;a&gt;&lt;div class="nestedtable"&gt;Tableshowing no need edit&lt;/div&gt;&lt;/a&gt;&lt;span class="editable"&gt;RecID3&lt;/span&gt;&lt;/td&gt;
      &lt;td&gt;Val3.1&lt;/td&gt;
      &lt;td&gt;    &lt;ul&gt;
      &lt;li&gt; &lt;a class="edit"&gt;edit&lt;/a&gt;&lt;/li&gt;
       &lt;li&gt; &lt;a class="cancel"&gt;cancel&lt;/a&gt;&lt;/li&gt; 
      &lt;/ul&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>