jQuery：使表格单元格内容可编辑

Question

我目前正在使用python，jquery开发一个小型app引擎项目。

我有一个简单的表格（例如人物信息），每行的最后一栏都有一个名为“编辑”的单元格，请参阅this jsfiddle demo.

如果我点击“编辑”，我希望此行上的其他单元格可编辑，“编辑”变为“确定”;

然后我可以编辑名称，年龄等的单元格，如果单击“确定”，提交更新的内容，“确定”将返回“编辑”，单元格将再次变为正常（不可编辑）。

知道如何实现这个吗？提前谢谢你。

Answer 1

也许这就是你想要的：

http://jsfiddle.net/AnLFS/

var editButton = $('#edit');
editButton.on('click', function(){
   $('textarea').removeAttr('readonly');
});​

Answer 2

您需要一个就地编辑器，例如：http://www.yvoschaap.com/instantedit/ 还有一个jquery：http://jquery-in-place-editor.googlecode.com/svn/trunk/demo/index.html

Answer 3

一种解决方案是为jQuery实现jEditable和datatables插件。 datatables插件网站有一个例子来说明这一点。

http://datatables.net/examples/api/editable.html

Answer 4

另一个不错的解决方案，它具有内联编辑和其他功能，过滤等等。http://www.apphp.com/php-datagrid/examples/sample_2_2_demo.php