javascript - 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

我收到你的问题了。您需要在单击编辑时存储当前值，但您是在单击编辑和保存时存储它。这是一个更新的工作 fiddle 。 http://jsfiddle.net/9KEGd/193/

工作代码与 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");
});

});

此外，我还修复了在单击“取消”时将 html 更改为“编辑”的问题。