Jquery table edit row cancel button is not working properly

Question

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: http://jsfiddle.net/9KEGd/191/

Js:

 $(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("<input type='text' value="+currentValue+" />");
        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{


    }
});
});

html:

  <table id="tabledata">
  <thead>
    <th>RecID</th>
    <th>Col1</th>
    <th>opt</th>
</thead>
<tr>
<td><a><div class="nestedtable">Tableshowing no need edit</div></a><span class="editable">RecID1</span></td>
    <td>Val1.1</td>
    <td>
    <ul>
    <li> <a class="edit">edit</a></li>
     <li> <a class="cancel">cancel</a></li> 
    </ul>


    </td>
</tr>
<tr>
<td><a><div class="nestedtable">Tableshowings no need edit</div></a><span class="editable">RecID2</span></td>
    <td>Val2.1</td>
    <td>    <ul>
    <li> <a class="edit">edit</a></li>
     <li> <a class="cancel">cancel</a></li> 
    </ul></td>
</tr>
<tr>
    <td><a><div class="nestedtable">Tableshowing no need edit</div></a><span class="editable">RecID3</span></td>
    <td>Val3.1</td>
    <td>    <ul>
    <li> <a class="edit">edit</a></li>
     <li> <a class="cancel">cancel</a></li> 
    </ul></td>
</tr>
</table>

Answer 1

I got your question. You need to store the current value on click of edit but you were storing it on click of both edit and save. Here is an updated working fiddle. http://jsfiddle.net/9KEGd/193/

Working code same as fiddle:

$(function () {

$(".edit").click(function (e) {
    e.preventDefault();
    e.stopImmediatePropagation();
    var btn = $(this);
    var td = btn.closest("tr").find(".editable");



    //Save current text in td data attribute

    if(btn.text() === "edit")
    {
    //store the current value only on click of EDIT and not on save
      var currentValue = td.text();
      $(td).data("current-value", currentValue);
        td.html("<input type='text' value="+currentValue+" />");
        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);


        //Set attribute to empty string
        $(td).data("current-value", "");
    }else{


    }
    $(this).parents('tr').find(".edit").html("edit");
});

});

Also I have fixed changing the html to EDIT on click of cancel.