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

Question

如何使用jQuery单击表格单元格并编辑其内容.有一个特定的列包含几段数据,因此如果可能的话,有一个带有大文本区域的弹出窗口(或者理想情况下是一个HTML编辑器).

这些更改只需要肤浅,因为我正在使用另一个jQuery插件来抓取表内容并将其导出到其他内容.

难度,没有一个单元格可以有唯一的名称或id.

Answer 1

我使用数据表(一个jQuery插件),因为这使一切变得如此简单.

他们还说要在他们的插件中使用jEditable插件.允许行变为可编辑:链接:可编辑表(包括代码示例)

Answer 2

看到这个页面是如何3岁和谷歌搜索的第一个结果我认为这是一个更新的答案.考虑到上面插件选项的重量和复杂性,我认为对于那些寻找替代品的人来说,更简单,更简单,更直接的解决方案也是值得赞赏的.

这将使用文本输入替换表格单元格并调用自定义事件,以便您可以处理保存,关闭,模糊等所需的任何用例...

在这种情况下,更改单元格中信息的唯一方法是按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();

Answer 3

您可能需要检查jqGrid插件。

Answer 4

试试这个简单的方案:

$(function () {
    $("td").dblclick(function () {
        var OriginalContent = $(this).text();

        var inputNewText = prompt("Enter new content for:", OriginalContent);

        if (inputNewText != null) {
            $(this).text(inputNewText)
        }
    });
});