如何用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/