Question

我正在尝试编辑表格行但无法正常工作。如果我单击编辑按钮然后删除文本框值然后单击显示警告的编辑按钮填充文本框，否则ucer将单击我要显示的取消按钮previuse值但取消按钮不能正常工作。任何人都解决此问题。请参阅JSFiddle代码：http://jsfiddle.net/9KEGd/191/

JS：

@Layout(Layout.NONE)
@RequestMapping(value = "/", method = RequestMethod.GET)
public ModelAndView index() {
    ModelAndView mav = null;
    mav = new ModelAndView("index.html");
    return mav;
}

HTML：

 $(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{


    }
});
});

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。

Jquery表编辑行取消按钮不能正常工作

1 个答案: