Question

我试图找出如何从表中删除单元格后恢复Jeditable字段？

我有桌子

包含一个单元格的行（colspan）
包含许多单元格的行（ID - s行

带ID的行有一个单元格，其中包含一些文本和可编辑的span - 元素（带有Jeditable）。现在，当我单击按钮时，我想从具有ID的行中删除所有单元格，并将其替换为仅包含span - 元素的单元格（应保持可编辑状态）。

问题是：我无法恢复已重新创建的span的可修改性。

我尝试了不同的方法，最简单的应该运行$( '.editable' ).editable('enable')，但我无法弄清楚，为什么它不起作用。

我的一个努力是这样的：

$(document).ready(function(){
  $("#remove").click(function() {
    $("table#original tr").each( function( index, row ) {
      if ( $( row ).attr( 'id' ) ) {
        var editabaleField = $( row ).children( 'td' ).children( 'span' ).text();
        $( row ).children( 'td' ).remove();
        $("<td colspan='3'><span class='editable'>" + editabaleField + "</span></td>").appendTo( row );
        $( '.editable' ).editable('enable');
      }
    });
  });

  $('.editable').editable('echo.php', {
    type      : 'text',
    tooltip   : 'Just click...'
  });

});

也制作了Fiddle，希望有助于更好地理解我的问题。

Answer 1

<强>问题

问题似乎是可编辑对象正在被销毁，当您尝试重新启用它时，它不会保留相同的选项，因此它会失败。

<强>解决方案：

摘要变量的选项（以便于更改）

var editableOptions = {
    type      : 'text',
    tooltip   : 'Just click...'
  };
var editableURL = 'echo.php';

更新.editable()调用以使用这些新变量：

$(document).ready(function(){
  $("#remove").click(function() {
    $("table#original tr").each( function( index, row ) {
      if ( $( row ).attr( 'id' ) ) {
        var editabaleField = $( row ).children( 'td' ).children( 'span' ).text();
        $( row ).children( 'td' ).remove();
        $("<td colspan='3'><span class='editable'>" + editabaleField + "</span></td>").appendTo( row );
        $( '.editable' ).editable(editableURL, editableOptions)
      }
    });
  });

  $('.editable').editable(editableURL, editableOptions);
});

Working JSFiddle

Answer 2

您不需要在新的td单元格中重新创建可编辑字段。事实上，你不应该首先删除它。从性能和优化的角度处理这个问题的正确方法是创建新的td并将已经初始化的可编辑元素移动到它。在这种情况下，您不必担心再次重新启动它。

所以你的代码将成为：

$(document).ready(function () {

    $("#remove").click(function () {
        $("table#original tr").each(function (index, row) {
            if (row.id) {
                var editableField = $(row).find('.editable');
                var newTd = $("<td colspan='3'></td>").append(editableField);
                $(row).empty().append(newTd);
            }
        });
    });

    $('.editable').editable('echo.php', {
        type: 'text',
        tooltip: 'Just click...'
    });

});

演示： http://jsfiddle.net/jxtnd1g4/

或者同一事物的变化稍短：

$("#remove").click(function () {
    $("table#original tr[id]").html(function() {
        var editable = $(this).find('.editable');
        return $('<td colspan="3"></td>').append(editable);
    });
});

如何恢复可裁剪功能？

2 个答案: