Question

我有一个表格，我在单元格和列中有多个值。当用户点击TD单元格上的任何地方时，我希望它：

成为textarea
将当前文本粘贴到textarea
在其下面放置一个取消按钮
按下取消按钮后，我希望所有内容都按照之前的状态进行更改
能够从Point＃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');
});

这是我的小提琴：https://jsfiddle.net/vsauhkfk/1/

我的尝试是为Point＃4工作，但是当点击TD时似乎没有任何反应。我在这里缺少什么？

Answer 1

你快到了。你的取消功能中有1个拼写错误和1个丢失的东西导致你出现问题。

你有：

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

应该是：

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

您正在添加＆＃39;数据状态＆＃39;属性为元素但从不删除它。

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

这是取消功能的代码：

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

});

请在此处查看工作小提琴：https://jsfiddle.net/vsauhkfk/2/

如何使用jQuery创建“编辑”/“取消编辑”框？

1 个答案: