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

Question

我有这个表应该是这样的：

单元格值可更改。

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

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

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

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

任何人都可以帮助我吗？

Answer 1

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

http://html5doctor.com/the-contenteditable-attribute/

浏览器支持实际上非常好。甚至IE也支持它。

http://html5doctor.com/the-contenteditable-attribute/#browser-support

基本上这样做：

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

小提琴：http://jsfiddle.net/BgUrx/

Answer 2

如果要向表格单元格添加输入...这里是Fiddle

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

小提琴结果

Answer 3

您可以添加无边框或背景的可见输入，它会感觉像是“普通”文字但可编辑。