可编辑的插件-所有列均可同时编辑

Question

我正在使用Jeditable插件。我想做的是单击一个按钮，某一行中的所有字段都变为可编辑状态，并自动进入其可编辑状态。因此，换句话说，我有一个表，我想单击行侧面的“编辑”按钮，并且该行中的所有列都可编辑。这可能吗？

Answer 1

对的，这是可能的。
假设您使用Jeditable的方式是用户必须确认修改的方式，就像在演示站点上一样。查看“字符计数器”部分：可编辑的自定义输入。

而且，您不必在某个位置放置按钮，这会使元素可编辑。例如，如果元素具有类“ edit”（例如<div class="edit">blah blah</div>：），并且在Jeditable代码event:'dblclick'中设置了元素（这意味着您必须双击以编辑该字段），则以下代码完全可以实现您想要的功能（测试，工作！）：

<div>
  <div class="edit charcounter">blah blah</div>
</div>
<div>
  <button type="button" class="edit_all_btns">Click this button and all the fields will become editable!</button>
</div>
<script type="text/javascript">
<!--
$(document).ready(function () {
  $(".charcounter").editable("http://www.appelsiini.net/projects/jeditable/php/save.php", {
    indicator: "<img src='http://www.appelsiini.net/projects/jeditable/img/indicator.gif'>",
    type: "charcounter",
    submit: 'OK',
    tooltip: "Click to edit...",
    onblur: "ignore",
    charcounter: {
      characters: 60
    },
    event: 'dblclick'
  });

  $('.edit_all_btns').click(function () {
    $('.edit').dblclick();
  });

});
// -->
</script>

演示版

但是，这是一个带有表的更精致的jsFiddle示例，您可以在其中尝试代码：

http://jsfiddle.net/Sk8erPeter/qjrJX/