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

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。宽度保持不变，因为内容仍然存在，但我们看不到它们，因为输入挡住了路。当我们完成后，内容无论如何都会被替换，所以要知道其中的区别。