1
我有一個表格,我在單元格和列中有多個值。當用戶點擊一個TD手機在任何地方我希望它:如何用jQuery創建'編輯'/'取消編輯'框?
- 成爲一個textarea
- 當前的文本粘貼到文本區域
- 把一個取消按鈕在它之下
- 一旦取消按鈕按下時,我想一切都變回來,因爲它以前從點#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但後來好像什麼也沒有發生運輸署。我在這裏錯過了什麼?
啊太感謝你了!看起來幾乎完美。只剩下1個問題。當我打開例如3 textareas,然後嘗試取消第一個,它不起作用。我懷疑這是因爲全局變量已經改變。任何治療方法? –
檢查這個小提琴:https://jsfiddle.net/vsauhkfk/4/我已經修復它,所以它不依賴於全局變量。我正在使用數據屬性來包含原始文本。 –
並且如果您需要用用戶鍵入的文本區域更新TD。看看這個小提琴:https://jsfiddle.net/vsauhkfk/6/。請注意,出於安全原因,我是html編碼輸入。 –