Javascript 如何创建'；编辑'；/'；取消编辑'；带jQuery的框？

我有一个表格，其中单元格和列中有多个值。当用户单击TD蜂窝上的任意位置时，我希望它：

成为一个文本区域

将当前文本粘贴到文本区域

在它下面放一个取消按钮

一旦按下“取消”按钮，我希望一切都恢复到以前的状态

从第1点开始一次又一次地这样做的能力

以下是我的尝试：

HTML:

测试1
测试2
测试3

jQuery：

var t = '';
var prevHtml = '';
var thisElement = '';

$(document).on('click', '#tb td', function()
{       prevHtml = $(this).html();
        thisElement = this;
    if ($(this).attr('data-status') == 'active'){return;};
    $(this).attr('data-status', 'active');
    t = $(this).text();
    $(this).html('<div class="row custom-status-main"><div class="col-md-12"><textarea maxlength="2000" rows="3" class="form-control" style="font-size: 12px;width: 80%;resize:vertical;">'+t+'</textarea></div></div><div class="row" style="margin-top:5px;"<div class="col-md-6"><button class="btn btn-xs btn-grey cancel-btn">Cancel</button></div></div>');
});

$(document).on('click', '.cancel-btn', function()
{
    $(thisElement).html(prevHtml);
  $(thisElement).removeAttr('data-custom-status');
});

var t=''；
var prevHtml=''；
var thisElement=''；
$（文档）。在（'单击'，'tb td'，函数（）上
{prevHtml=$（this.html（）；
这个元素=这个；
if（$（this）.attr（'data-status'）=='active'）{return；}；
$（this.attr（'data-status'，'active'）；
t=$（this.text（）；
$（this.html（“”+t+'您就快到了。您的Cancel函数中有一个输入错误和一件东西丢失，这导致了您的问题

你有：

$(thisElement).removeAttr('data-custom-status');

应该是：

$(thisElement).removeAttr('data-status');

您正在向元素添加“数据状态”属性，但从未删除它

您还需要在cancel方法中添加stopPropagation（）调用。否则，单击cancel按钮将运行cancel方法，但单击事件将再次向上传播DOM到TD元素，并重新触发TD单击

以下是取消功能的代码：

$(document).on('click', '.cancel-btn', function(e)
{
    $(thisElement).html(prevHtml);
  $(thisElement).removeAttr('data-status');
  e.stopPropagation();

});

看到这里的工作小提琴：
啊，非常感谢！看起来几乎完美。只剩下一个问题。当我打开例如：3个文本区域，然后尝试取消第一个时，它不起作用。我怀疑这是因为全局变量已更改。有什么解决方法吗？检查此小提琴：我已修复它，因此它不依赖于全局变量。我是我们正在编辑数据属性以包含原始文本。如果您需要使用用户在文本区域中键入的内容更新TD。请看此提琴：。注意，出于安全原因，我正在对输入进行html编码。非常感谢！非常有用！看起来我今天学到了一些非常有用的东西！为您的帮助干杯Gregg！
$(document).on('click', '.cancel-btn', function(e)
{
    $(thisElement).html(prevHtml);
  $(thisElement).removeAttr('data-status');
  e.stopPropagation();

});