代码之家 › 专栏 › 技术社区 › David Morton

table>tbody>tr>td>div>切换span和textbox而不调整表的大小?

css html

David Morton · 技术社区 · 16 年前

所以我有这个控制权。它是一个网站的就地文本编辑器,其基本思想是,它将显示一个带有一些文本的标签,当你点击文本时,标签消失,一个文本框出现在它的位置,这样用户就可以编辑数据。

总体布局是这样的(为了清晰起见,删除了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>

有什么想法吗?

编辑:

.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;
}

使用如下所示的click事件处理程序:

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

4 回复 | 直到 16 年前

Jage 16 年前

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

Josh Stodola 16 年前

我知道防止细胞膨胀的唯一方法就是用这个。。。

table { table-layout: fixed; width: 500px; }
table td { overflow:hidden; }

div 相对定位,然后将输入设置为绝对。。。

td div { position: relative; }
td div input { position: absolute; }

绝对定位的元素不会导致扩展,它们的起始位置基于第一个相对定位的父元素。

Walt Stoneburner 16 年前

div 或者 td 元素?不要弄乱定位。

Jason Kester 16 年前

在隐藏文本并显示textarea的函数中,您可以嗅探单元格的尺寸并调整textbox的大小以匹配。

<div>
  <span onclick="flip(this,'box1')">When you click me, I'll disappear and show the input instead.</span>
  <input id='box1' type="textbox" style="display:none"/>
</div>

<script>
  function flip(text, boxID)
  {
    var box = document.getElementById(boxID);
    var parent = text.off
    box.style.width = text.offsetParent.offsetWidth + "px";

    text.style.display = "none";
    box.style.display = "";
  }
</script>

当然,如果您想使用TextArea而不是TextBox,您可以嗅探&轻松设置高度(使用.Height&)。分别在八点以外)。

祝你好运