Question

是否有任何函数会像.appendTo()那样，但会替换内容而不是追加，将replacer保持为jQuery对象？ html()不会将元素保留为对象，只需将其转换为html。

问题是我希望能够动态编辑表格单元格。因此，当用户悬停td时，会出现一个带铅笔的按钮，点击它后，单元格内容将被放入输入框中，并替换为该输入。

程序很简单，但是切换到输入会减小单元格大小很烦人，因此整个表格正在调整大小。使用html()修复了该问题，但它会导致blur事件以及自动对焦或在输入框中选择文字。

这是这样的：

<script>
    var parent = $(this).parent();
    var old = $(parent).html();
    var input = $('<input type="text"/>').val($(parent).text()).attr('rel',old);

    //--- would like to combine lines below ---//

    $(parent).html(''); <-- this resizes table cell
    $(input).appendTo($(parent)).focus().select(); //<-- this is important thing.
</script>

输入宽度设置为100％。

如果我使用$(parent).html($(input).focus().select());，它当然不会调整表格单元格的大小，但也不会聚焦或选择文本，因为该节点尚未存在于文档中。

首先添加输入然后删除旧内容是一个坏主意，因为它扩展了表格单元格大小。

请不要提及replaceWidth()，因为它不是我的意思！

提到表格单元尽可能小，所以：

td{
   width:1px;
   padding:5px;
   white-space:nowrap;
}

由于max-width不适用于包含nowrap的表格单元格，因此将内容放入限制内容大小为150px的div中：

.td_limiter{
   max-width:150px;
   overflow:hidden;
   text-overflow:ellipsis;
}

jQuery - 用预定义的元素替换td的内容

0 个答案: