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

表格第一行文本“可编辑”不起作用。我有两个按钮，一个是编辑，另一个是取消。如果我点击编辑按钮，我想用文本框编辑第一个td文本，如果我点击保存按钮，我想保存数据。如果我单击“取消”按钮，我想显示以前的值。我试过了，但没有成功。请帮忙

html:

累西德
可乐
选择
首先，在小提琴中，您缺少第一行按钮上的类。添加
class='edit'
和
class='cancel'
以使您的点击生效

然而，你把这件事复杂化了一点，我想这是一把更容易使用的小提琴。这段代码可能会更优雅一些，但它会让您更接近


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

$（函数（）{
无功电流值；
$（“.edit”）。单击（函数（e）{
e、 预防默认值（）；
e、 停止即时复制（）；
var btn=$（本）；
var td=最近的btn（“tr”）。查找（“可编辑”）；
currentValue=td.text（）；
如果（btn.text（）=“编辑”）
{
td.html（“”）；
html（“保存”）；
}
其他的
{
html（td.find（“input”）.val（））；
html（“编辑”）；
}
});
$（“.cancel”）。单击（函数（e）{
e、 预防默认值（）；
e、 停止即时复制（）；
var td=$（this.closest（“tr”）.find（“可编辑”）；
if（当前值）
{
html（currentValue）；
$（this.parent（）.find（“.edit”）.html（“edit”）；
currentValue=null；
}
});
});
第一行没有edit类。现在更新了codeOk，那么具体问题是什么？我想编辑第一行td文本。编辑和保存按钮作为一个类似这样的切换，但编辑选项只为第一行，不需要添加行选项：我只要求第一行。重要提示：仅可编辑td文本，不适用于ancher标签。RecIDYou更改了导致编辑第一列的等式（0）而不是等式（1）。将其更改回等式（1），就像我编辑第二列一样，因为您希望只编辑ancher标记后的td文本：无需编辑此文本Recidah好的，我现在就可以了。你能编辑html吗？如果是这样，在文本周围添加一个类，如下所示，并以这种方式进行编辑。我也相应地更新了答案
$(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
   });
});
 });

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