在父级td

Question

我有一个表格，我希望能够双击单元格来编辑它们。即使我只显示实际表格单元格中的前几个字符，我想在textarea元素内双击显示/编辑全文。

textarea元素将保持隐藏，直到表格单元格被双击，然后在表格单元格的顶部变为可见，直到再次隐藏的blur（）事件。如果有更好的方法，请告诉我。

＆＃13;

＆＃13;

$(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");
});

＆＃13;

body {
    margin: 50px 25px;
}

table {
  width: auto !important;
}

.edit-box {
display:none;
float: left;
margin-left: -8px;
margin-top: -28px;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

这个小提琴中的相同代码：https://jsfiddle.net/prxbl/1hw2f0b9/29/

当前问题：

1. Textarea元素应该扩展到父td以外的所有内容，而不会破坏表格布局。
2. Textarea元素不应该是透明的，它应该掩盖背后的元素。

非常感谢任何有关解决这些问题的帮助。

Answer 1

问题1和2都可以通过添加＆＃34; position：absolute;＆＃34;来解决。在CSS中使用.edit-box类。现在，textarea元素可以扩展到父容器之外。