jQuery表格編輯行取消按鈕無法正常工作

Question

我正在嘗試編輯表格行，但無法正常工作。 如果我單擊編輯按鈕然后刪除文本框值，然后單擊顯示警告的編輯按鈕以填充文本框，否則ucer將單擊我要顯示的取消按鈕先前值，但取消按鈕無法正常工作。任何人都可以解決此問題。 有關代碼，請參見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");
});

}）;

另外，我已修復了單擊取消將html更改為EDIT的問題。