就地编辑JavaScript，一次编辑多个字段

Question

有没有人可以推荐一个JavaScript库或示例代码，用于同时内联编辑多个字段?我在寻找类似于Flickr的东西，当你点击或照片的名称或描述时，它们都变成文本框，当用户点击"保存"时，它们都被保存。

我正在使用jQuery，所以jQuery插件会很好，但不是必需的。我已经看了https://stackoverflow.com/questions/708801/whats-the-best-edit-in-place-plugin-for-jquery，但还没有发现任何支持多字段的

Answer 1

可以选择不使用插件。你可以这样做:HTML:

<form>
  <table>
    <tr>
      <td>
        <span name="displayText">Text to edit1</span>
        <input type="text" name="editText" value="Text to edit1" style="display:none">
      </td>
    </tr>
    <tr>
      <td>
        <span name="displayText">Text to edit2</span>
        <input type="text" name="editText" value="Text to edit2" style="display:none">
      </td>
    </tr>
    <tr>
      <td>
        <input type="submit" name="save" value="Save">
      </td>
    </tr>
  </table>
</form>

然后你可以在$(document).ready(): 中编写类似的jQuery

$('span[name=displayText]').click(function() {
  $(this).hide();
  $('input[name=editText]', $(this).closest('td')).show();
});

你当然可以随心所欲地设计它们的样式。

(注:

Answer 2

Joseph Scott的编辑器工作得相当好。由于一切都是通过模板和CSS类完成的，因此也可以相当自定义。请看这里的演示。(他确实模仿了FLickr。)

另一个就地编辑器看起来也很有前途，虽然我自己还没有试过。