jquery - 使用 jQuery 编辑单个表格单元格

Question

如何使用 jQuery 单击表格单元格并编辑其内容。有一个包含多段数据的特定列，因此如果可能的话，有一个带有大文本区域的弹出窗口(或者最好是一个 HTML 编辑器)。

更改只需要是表面的，因为我正在使用另一个 jQuery 插件来抓取表格内容并将其导出到其他内容。

困难，没有一个单元格可以有唯一的名称或 ID。

Answer 1

鉴于此页面已有 3 年历史，而且是 Google 搜索中的第一个结果，我认为它应该是一个更新的答案。考虑到上述插件选项的重量和复杂性，我认为对于那些寻找替代方案的人来说，更简单、简洁、更直接的解决方案也可能会受到赞赏。

这会用文本输入替换表格单元格并调用自定义事件，因此您可以处理任何您想要的保存、关闭、模糊等用例...

在这种情况下，更改单元格中信息的唯一方法是按 enter，但如果您愿意，您可以自定义它，例如。你可能想节省模糊。

在此示例中，您还可以按 Esc 键停止编辑并将单元格恢复为原来的状态。您可以根据需要自定义它。

此示例适用于单击，但有些人更喜欢双击，您可以选择。

$.fn.makeEditable = function() {
  $(this).on('click',function(){
    if($(this).find('input').is(':focus')) return this;
    var cell = $(this);
    var content = $(this).html();
    $(this).html('<input type="text" value="' + $(this).html() + '" />')
      .find('input')
      .trigger('focus')
      .on({
        'blur': function(){
          $(this).trigger('closeEditable');
        },
        'keyup':function(e){
          if(e.which == '13'){ // enter
            $(this).trigger('saveEditable');
          } else if(e.which == '27'){ // escape
            $(this).trigger('closeEditable');
          }
        },
        'closeEditable':function(){
          cell.html(content);
        },
        'saveEditable':function(){
          content = $(this).val();
          $(this).trigger('closeEditable');
        }
    });
  });
return this;
}

您可以通过像这样附加可编辑单元格或任何对您的情况有意义的方式来选择性地应用可编辑单元格。

$('.editable').makeEditable();