html - 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，以便让这个东西保持静止。我对 position:absolute 在 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 支撑打开。我怀疑输入比文本的跨度高一点，因此您可能需要将该高度提高几个像素。