jQuery - 内联编辑表格行答案

【问题标题】：jQuery - Edit a table row inlinejQuery - 内联编辑表格行
【发布时间】：2010-10-02 14:10:25
【问题描述】：

我有一个包含任意列和行的表。这个事实无关紧要，但实际上，我想做的只是开发一个函数，它将一行（或多行）转换为一系列包含表中数据的文本输入（如果单元格中没有数据，则为空）。

我找不到任何明确这样做的人的例子，所以我想知道这里的人们认为什么是找到解决方案的最佳方法。

【问题讨论】：

【解决方案1】：

遍历行中的表格单元格，并将内容替换为文本输入：

function editRow(row) {
    $('td',row).each(function() {
         $(this).html('<input type="text" value="' + $(this).html() + '" />');
    });
}

您显然需要将相关的行传递给函数。

【讨论】：

【解决方案2】：

就像 Eran 说的那样。

不过，您也可以查看 contenteditable 和 designMode 等属性，尽管我不确定这些属性的支持程度。

用文本输入替换内容后，您可以使用 jquery 插件toggleEdit 管理在预览模式和编辑模式之间切换它们。

【讨论】：

【解决方案3】：

使用http://code.google.com/p/jquery-inline-editor/，它完全满足您的需求

【讨论】：