javascript - 如何使用 jQuery 创建 'edit'/'cancel edit' 框？

Question

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

1. 成为文本区域
2. 将当前文本粘贴到文本区域
3. 在其下方放置一个取消按钮
4. 一旦按下取消按钮，我希望一切都变回以前的样子
5. 能够从第 1 点开始一次又一次地做到这一点

这是我的尝试:

HTML:

<table style="border: 1px solid black;text-align: center;" id="tb">
  <tr style="border: 1px solid black;">
    <td style="border: 1px solid black;width:200px;height:100px;">
      <div class="id1">TEST1</div>
    </td>
    <td style="border: 1px solid black;width:200px;height:100px;">
      <div class="id2">TEST2</div></td>
    <td style="border: 1px solid black;width:200px;height:100px;">
      <div class="id3">TEST3</div></td>
  </tr>
</table>

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

这是我的 fiddle :https://jsfiddle.net/vsauhkfk/1/

我的尝试适用于第 4 点，但点击 TD 时似乎没有任何反应。我在这里缺少什么？

Answer 1

你就快到了。您的“取消”函数中有 1 个拼写错误和 1 个内容缺失，导致出现问题。

你有:

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

应该是:

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

您向元素添加了“data-status”属性，但从未将其删除。

您还需要在取消方法中添加 stopPropagation() 调用。否则，您单击取消按钮将运行您的取消方法，但单击事件将再次将 DOM 传播到 TD 元素并重新触发您的 td 单击。

这是取消函数的代码:

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

});

在这里查看工作 fiddle :https://jsfiddle.net/vsauhkfk/2/