如何用jQuery创建'编辑'/'取消编辑'框？

Question

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

1. 成为一个textarea
2. 当前的文本粘贴到文本区域
3. 把一个取消按钮在它之下
4. 一旦取消按钮按下时，我想一切都变回来，因为它以前从点＃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/

点击，当我尝试工作点＃4但后来好像什么也没有发生运输署。我在这里错过了什么？

Answer 1

你几乎在那里。您的取消功能中有1个拼写错误和1个东西缺失，导致您遇到问题。

您有：

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

它应该是：

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

你是在加入了 '数据状态' 属性的元素，但从来没有移除它。

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

这里是为您取消功能代码：

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

}); 

看到这里的工作小提琴：https://jsfiddle.net/vsauhkfk/2/