table> tbody> tr> td> div>没有表调整大小的切换范围和文本框？

Question

所以我有这个控制,我正在努力.它是一个网站的就地文本编辑器,其基本思想是它将显示带有一些文本的标签,当您单击文本时,标签消失,文本框出现在其中,以便用户可以编辑数据.

一般布局是这样的(为清楚起见,删除了id和事件):

<table>
  <tbody>
    <tr>
      <td>
         Some other cell, etc.
      </td>
      <td>
        <div>
          <span>When you click me, I'll disappear and show the input instead.</span>
          <input type="textbox" style="display:none"/>
        </div>
      </td>
    <tr>
  </tbody>
</table>

所以问题是,这个设置非常繁琐,并且当跨度消失并且输入显示时调整单元格的大小.我的总体目标是能够在div,span和/或输入上设置一些CSS,以使这个东西保持静止.我在位置上有一点点运气:在div上是绝对的,然而,文本只是溢出它的边界,并且没有在单元格内正确包裹.

由于这是一个控件,我可以根据需要移动这三个元素,或者添加其他元素,但我真的想单独留下table,tbody,tr和td标签.

有任何想法吗？

编辑:

最后,我有这样的事情:

.inPlaceEditor
{
    margin-right:0px;
    margin-left:0px;
    margin-top:0px;
    margin-bottom:0px;
    white-space:normal;
    display:block;
    width:100%;
    height:100%;
}

.inPlaceEditor span
{
    white-space:normal;
}

.inPlaceEditor input[type="textbox"]
{
    display:none;
    width:100%;
    border:solid 0px black;
    margin-top:0px;
    margin-bottom:0px;
    padding-bottom:0px;
    padding-top:0px;
    padding-left:0px;
}

使用单击事件处理程序,如下所示:

function ShowInPlaceTextEditor(_this) {
    var div = $(_this).closest('td');
    div.css({ height: div.height(), width: div.width() });
    $(_this).hide().next().show().focus().selectAllText();
}

以及隐藏文本框的关联处理程序,如下所示:

function HideInPlaceTextEditor(_this) {
    $(_this).closest('td').css('height', '');
    $(_this).hide().prev().html($(_this).val() == '' ? $(_this).closest('div').attr('emptyText') : $(_this).val()).show();
}

感谢所有帮助过的人.

Answer 1

如果您可以依赖 javascript，请用 div 包围该单元格中的所有内容。当页面加载时，获取该 div 呈现时的当前高度。然后，将该高度分配给样式中的 div。这样，当您显示输入时，它仍应由分配有高度的 div 支撑打开。我怀疑输入比文本的跨度稍高，因此您可能需要将该高度提高几个像素。