jquery - 使用 DIV 作为 HTML 片段持有者

Question

我正在尝试呈现可编辑的表格，并且正在评估以下方法：

• 我从后端准备 HTML 表格，其中数据作为标签和编辑命令
• <TR>我在隐藏的 DIV 中准备了一个空行（a ），其中包含数据输入和保存命令

• 使用 jQuery on edit's click 我隐藏当前行并附加 DIV 中可用的填充行.html()

  更新：我添加了一个jsFiddle来表示这种方法

现在，我的问题是：这种方法有什么缺点吗？有更好的方法吗？

我担心一些事情：

• a<TR>内的 a<DIV>不是 XHTML 有效的；也许我可以遇到一些跨浏览器问题？
• 我不希望 Web 开发人员<TR>通过 JS 脚本编辑元素，以避免引号转义，并获得可维护性

Answer 1

我认为您应该尝试探索这种方法：

JS小提琴

var firstTd = $("td:eq(0)", myTr);
firstTd.html('<input type="text" name="field1" value="' + firstTd.html() + '"/>');

Answer 2

你考虑过contenteditable属性吗？我用你的小提琴来展示它是如何工作的：

单击编辑按钮时，该contenteditable属性将赋予包含行。单击保存按钮时，它会被删除。CSS 用于根据属性显示和隐藏右侧按钮（如果要支持旧的 IE，可能需要更改脚本以添加类 - IE6 无法读取属性选择器）。

在我看来，这在代码方面不那么冗长，并且使用户的体验更加明显。