我有一個表格,我希望能夠雙擊單元格以編輯它們。即使我只顯示實際表格單元格中的前幾個字符,我想在textarea元素內雙擊顯示/編輯全文。展開textarea在父級之外td
textarea元素將保持隱藏狀態,直到表格單元格被雙擊,然後它會在表格單元格頂部可見,直到它再次隱藏時爲blur()事件。如果有更好的方法,請告訴我。
$(function() {
$('td.nota').dblclick(function (e) {
e.stopPropagation(); //stop the propagation of the event here
$(this).children().css("display","block");
$(this).children().focus();
//alert('test');
});
});
$('td.nota').children().blur(function(){
$(this).css("display","none");
});
body {
margin: 50px 25px;
}
table {
width: auto !important;
}
.edit-box {
display:none;
float: left;
margin-left: -8px;
margin-top: -28px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="table-responsive">
<table class="table table-bordered table-hover">
<tbody>
<tr>
<td class="text-center"><input type="checkbox" name="selected[]" value="761">
</td>
<td class="text-left nota" id="761" style="max-width: 20ch;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">Lorem ipsum dolor sit amet, consectetur adipiscing elit<textarea class="edit-box" rows="2">Lorem ipsum dolor sit amet, consectetur adipiscing elit</textarea></td>
</tr>
<tr>
<td class="text-center"><input type="checkbox" name="selected[]" value="760">
</td>
<td class="text-left nota" id="760" style="max-width: 20ch;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">Lorem ipsum dolor sit amet, consectetur adipiscing elit<textarea class="edit-box" rows="2">Lorem ipsum dolor sit amet, consectetur adipiscing elit</textarea></td>
</tr>
</tbody>
</table>
</div>
相同的代碼,在此琴:https://jsfiddle.net/prxbl/1hw2f0b9/29/
目前存在的問題:
- textarea元素應擴大超越父TD,一切之上,而不會破壞表佈局。
- Textarea元素不應該是透明的,它應該掩蓋後面的元素。
任何幫助解決這些問題,非常感謝。
請不要編輯問題以包含答案。這對未來的訪問者來說這個問題的目的是失敗的,而且非常混亂。 –