Question

表格第一行文字可编辑无效。我有两个按钮，一个是编辑，另一个是取消。如果我单击编辑按钮我想用文本框编辑第一个td文本，如果我单击保存按钮我想再次保存该数据。如果我单击取消按钮，我想显示以前的值。我试过但不工作。请帮忙。

HTML：

<table id="tabledata">
<tr>
    <th>RecID</th>
    <th>Col1</th>
    <th>opt</th>
</tr>
<tr>
<td><a><div class="nestedtable"> </div></a>RecID</td>
    <td>Val1.1</td>
    <td><button class="edit">edit</button><button class="">cancel</button></td>
</tr>
<tr>
    <td><a><div class="nestedtable"> </div></a>RecID</td>
    <td>Val2.1</td>
    <td><button class="edit">edit</button><button class="cancel">cancel</button></td>
</tr>
<tr>
    <td><a><div class="nestedtable"> </div></a>RecID</td>
    <td>Val3.1</td>
    <td><button class="edit">edit</button><button class="cancel">cancel</button></td>
</tr>

的javascript：

$(function () {
$(".edit").click(function (e) {
    e.preventDefault(); // <-- consume event
    e.stopImmediatePropagation();

    $this = $("#tabledata:first td");

    if ($this.data('editing')) return;  

    var val = $this.text();

    $this.empty()
    $this.data('editing', true);        

    $('<input type="text" class="editfield">').val(val).appendTo($this);

    $this.text("save");
    $this.addclass('savefield')

});

putOldValueBack = function () {
    $("#tabledata .editfield").each(function(){
        $this = $("#tabledata:first td");
        var val = $this.val();
        var td = $this.closest('td');
        td.empty().html(val).data('editing', false);

         $this.text("edit");
         $this.addclass('editfield')


    });
}

$(document).click(function (e) {

   $(".savefield").click(function (e) {
   putOldValueBack();
   });
     $(".cancel").click(function (e) {
      //cancel editable and show previous value show
   });
});
 });

小提琴：http://jsfiddle.net/9KEGd/178/

Answer 1

首先，在小提琴中，你错过了第一排按钮上的课程。添加class='edit'和class='cancel'即可让您的点击次数有效。

然而，你有点过于复杂，我认为这是一个更容易使用的小提琴。这段代码可能会更优雅，但它可以让你更接近

http://jsfiddle.net/9KEGd/184/

的jQuery

$(function () {
    var currentValue;

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

        if(btn.text() === "edit")
        {
          td.html("<input type='text' value="+currentValue+" />");
          btn.html("save");
        }
        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");
        if(currentValue)
        {
          td.html(currentValue);
          $(this).parent().find(".edit").html("edit");
          currentValue = null;
        }
    });
});

可编辑的表第一行文本仅使用jquery

1 个答案: