javascript - 如何在表格的每个单元格中放置不可见的输入

Question

我有这张表，应该是这样的：

随着单元格值的变化。

但是在每个单元格内我想要一个<input type="number">单元格值，如果我单击它，我可以修改该值。

最重要的部分是风格。如何使用输入设置表格样式以保持外观相同？

现在，每个单元格由以下组成：

<td>
    <div>
        <p>Cell title</p>
        <p onclick="change(this);">Cell value</p>
    </div>
</td>

谁能帮我？

score 1 · Accepted Answer

如果您想向表格单元格添加输入...这里有一个Fiddle

input {
  border: none;
  outline: none;
  width: 30px;
  height: 30px;
  text-align: center;
}

小提琴结果

在此处输入图像描述

score 1 · Accepted Answer

如果您对 html5 解决方案没问题，您可以使用 contenteditable 属性：

浏览器支持实际上非常好。连IE都支持。

基本上这样做：

<div>
    <p>Cell title</p>
    <p contenteditable="true">Cell value</p>
</div>

score 0 · Accepted Answer

您可以添加一个没有边框或背景的可见输入，它感觉就像一个“普通”文本但可编辑。

3 回答 3