Jqueryテーブルの行のキャンセルボタンが正しく動作しない

Question

テーブルの行を編集しようとしていますが、正しく動作しません。 編集ボタンをクリックしてテキストボックスの値を削除し、編集ボタンをクリックしてテキストボックスを埋めるアラートを表示します。そうでない場合、キャンセルボタンが表示されますが、キャンセルボタンは正しく表示されません。コードのためJSFiddleを参照してください。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

私はあなたの質問を得ました。編集のクリックに現在の値を保存する必要がありますが、編集と保存の両方をクリックして保存しています。ここに更新された作業フィドルがあります。 http://jsfiddle.net/9KEGd/193/

作業コードフィドルと同じ：

$(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"); 
}); 

}）。

また、私はキャンセルのクリックでEDITにhtmlを変更することを修正しました。