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

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
   });
});
 });

fiddle :http://jsfiddle.net/9KEGd/178/

Answer 1

首先，在 fiddle 中，您错过了第一行按钮上的类。添加 class='edit' 和 class='cancel' 让您的点击生效。

但是，我认为你有点过于复杂了，所以这里有一个更容易使用的 fiddle 。这段代码可能更优雅一些，但它应该让你更接近

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;
        }
    });
});