可編輯的插件-所有列均可同時編輯

Question

我正在使用Jeditable插件。 我想做的是單擊一個按鈕，某一行中的所有字段都變為可編輯狀態，並自動進入其可編輯狀態。 因此，換句話說，我有一個表，我想單擊行側面的“編輯”按鈕，並且該行中的所有列都可編輯。 這可能嗎？

Answer 1

對的，這是可能的。
假設您使用Jeditable的方式是用戶必須確認修改的方式，就像在演示站點上一樣。 查看“字符計數器”部分：可編輯的自定義輸入 。

而且，您不必在某個位置放置按鈕，這會使元素可編輯。 例如，如果元素具有類“ edit ”（例如： <div class="edit">blah blah</div> ），並且在可編輯代碼中設置了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-example示例，您可以在其中嘗試代碼：

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