使用DIV作为HTML代码段

Question

我正在尝试渲染一个可编辑的表格，我正在评估以下方法：

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

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

  中可用的填充行

  更新：我添加了jsFiddle来代表此方法

现在，我的问题是：这种方法有任何缺陷吗？有更好的方法吗？

我关注一些事情：

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

Answer 1

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

JS Fiddle

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

Answer 2

您是否考虑过contenteditable属性？我把你的小提琴分开来展示how this might work：

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

我认为这种方式的代码更简洁，并且使用户的体验更加明显。