Question

我一直在玩这个，似乎无法让它按照我的意愿运作。

here是我的榜样当用户点击它们时，通过用输入替换文本内容，我有一个表格，我正在制作可编辑。在焦点丢失并且更新的文本替换单元格内容（输入）之后，将删除输入。

这一切都很有效，很棒。我的问题是，在输入替换文本后，单元格会自行调整大小。我已经将输入的宽度设置为100％，但这是我能想到的全部（除了测量单元格宽度并将其硬编码到该宽度之外，但是如果可能的话我想避免这种情况。）

（参见html内容示例）

css 假设表格的ID为#tblListings

#tblListings {
    width: 100%;
}
#tblListings thead {
 background-color: #dedede;   
}
#tblListings td, #tblListings th {
 padding: 6px;   
 border: 1px solid #adadad;
 border-bottom: none;
}
#tblListings tbody tr:nth-child(even) td {
 background-color: #efefef;
}
#tblListings tbody tr:last-child td {
 border-bottom: 1px solid #adadad;
}
#tblListings td input {
    width: 100%;
    border: none;
    outline: none;
    background-color: #ff0;
}

javascript 我认为这可以通过CSS实现，但我会发布这是安全的。

$("#tblListings tbody").on("click", "td", function(event) {
    if (event.target.tagName === "INPUT") return;
    var cell = $(this);
    var input = $("<input>", {
        type: "text",
        value: cell.text(),
        maxlength: 128
    });
    cell.empty().css("padding", 0).append(input);
    input.focus();
    input.on("blur", function() {
        cell.css("padding", 6).text(this.value);
    });
});

Answer 1

一种方法是将输入设置为具有绝对定位，但将原始内容保留在单元格中以保持宽度相同。请在此处查看更新：http://jsfiddle.net/V6rsC/29/。

我所做的是将单元格设置为具有相对定位，这样当我设置输入的边界时，它将使用单元格而不是文档。我将输入的左，上，右和下设置为0px。宽度保持不变，因为内容仍然存在，但我们无法看到它们，因为输入是阻碍的。当我们完成后，无论如何都要替换内容，所以知道有人知道其中的差异。

停止表格单元格的扩展，或将输入设置为表格单元格的宽度

1 个答案: