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

【问题标题】：Using jQuery to edit individual table cells使用 jQuery 编辑单个表格单元格
【发布时间】：2010-11-16 12:28:46
【问题描述】：

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

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

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

【问题讨论】：

标签： jquery html html-table

【解决方案1】：

您可能需要检查jqGrid 插件。

【讨论】：

【解决方案2】：

$("td").click(function(event){
    var myText = '';
    $("myOverlayThing").show();
    $("myOverlayThingCloseLink").click(function(event){
        event.preventDefault();
        myText = $("myOverlayThing.textarea").val();
    });
    $(this).html(myText);
});

可能比这更复杂一点，但这是基本想法，没有看到你的 HTML。

【讨论】：

我试过了，它所做的只是让单元格消失，让它空着。

【解决方案3】：

jEditable 插件可以帮助您就地编辑表格。

$(document).ready(function() {
    $('td').editable('http://www.example.com/save.php');
});

【讨论】：

【解决方案4】：

使用jQuery Editable 之类的插件可以实现内容可编辑。不过，这将是多么容易翻译到没有 id 的表上，我不确定。

如果您能够使该插件正常工作，那么遍历您的表格（我假设您的表格有自己的 ID 或者是页面上唯一的表格）将相当简单：

$('#myTable td').editable();

但这并不能为您提供所需的富文本编辑器。另一种方法是忘记该插件并尝试使用 jQuery UI 对话框。

$('#myTable td').click(function(){
  $('myDialog').dialog('open');
});

假设您在该对话框中放置了一个富文本编辑器，您可以使用 $.ajax() 将结果发布到服务器端的某个服务。

最后，jqGrid 对您来说可能是一个不错的选择，具体取决于您希望表中的数据。

【讨论】：

【解决方案5】：

Inkedmn 的代码不能正常工作，但它是最简单的方法：因此，根据他的逻辑查看以下工作代码：

$(function() {
    $('#overlay').hide();
    $('td').click(function(event) {
        var myText = '';
        $('#overlay').show();
        var o = $(this);
        $('#closeLink').click(function(event) {
            event.preventDefault();
            myText = $('#overlay textarea').val();
            $(o).html(myText);
            $(this).parent().hide(500);
        });                  
    });
});

【讨论】：

#overlay 元素是什么？是文本输入元素吗？
overlay 是一个 div 元素的 ID，我在其中放置了 textarea 和一个链接按钮（ID 为“closelink”）

【解决方案6】：

我使用Data tables (a jQuery plugin)，因为这让一切变得如此简单。

他们还说要在他们的插件中使用 jEditable 插件。允许行变为可编辑：Link: Editable Table（包括代码示例）

【讨论】：

【解决方案7】：

JQuery Datatables Editable 插件似乎比官方的 Editable Table 插件更好，因为前者支持内联编辑并且是开源的。

【讨论】：

【解决方案8】：

试试这个简单的解决方案：

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

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

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

【讨论】：

【解决方案9】：

鉴于此页面已有 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();

【讨论】：

这对我不起作用——像$('td').makeEditable(); 这样简单的东西不会使我在页面上的一个表格中的任何单元格可编辑。

【解决方案10】：

这其实很简单，这是我的 HTML、jQuery 示例……它就像一个魅力，我使用在线 json 数据示例构建所有代码。干杯

>

<table id="myTable"></table>

>

<script>
        var url = 'http://jsonplaceholder.typicode.com/posts';
        var currentEditedIndex = -1;
        $(document).ready(function () {
            $.getJSON(url, function (json) {
                var tr;
                tr = $('<tr/>');
                tr.append("<td>ID</td>");
                tr.append("<td>userId</td>");
                tr.append("<td>title</td>");
                tr.append("<td>body</td>");
                tr.append("<td>edit</td>");
                $('#myTable').append(tr);

                for (var i = 0; i < json.length; i++) {
                    tr = $('<tr/>');
                    tr.append("<td>" + json[i].id + "</td>");
                    tr.append("<td>" + json[i].userId + "</td>");
                    tr.append("<td>" + json[i].title + "</td>");
                    tr.append("<td>" + json[i].body + "</td>");
                    tr.append("<td><input type='button' value='edit' id='edit' onclick='myfunc(" + i + ")' /></td>");
                    $('#myTable').append(tr);
                }
            });


        });


        function myfunc(rowindex) {

            rowindex++;
            console.log(currentEditedIndex)
            if (currentEditedIndex != -1) {  //not first time to click
                cancelClick(rowindex)
            }
            else {
                cancelClick(currentEditedIndex)
            }

            currentEditedIndex = rowindex; //update the global variable to current edit location

            //get cells values
            var cell1 = ($("#myTable tr:eq(" + (rowindex) + ") td:eq(0)").text());
            var cell2 = ($("#myTable tr:eq(" + (rowindex) + ") td:eq(1)").text());
            var cell3 = ($("#myTable tr:eq(" + (rowindex) + ") td:eq(2)").text());
            var cell4 = ($("#myTable tr:eq(" + (rowindex) + ") td:eq(3)").text());

            //remove text from previous click


            //add a cancel button
            $("#myTable tr:eq(" + (rowindex) + ") td:eq(4)").append(" <input type='button' onclick='cancelClick("+rowindex+")' id='cancelBtn' value='Cancel'  />");
            $("#myTable tr:eq(" + (rowindex) + ") td:eq(4)").css("width", "200");

            //make it a text box
            $("#myTable tr:eq(" + (rowindex) + ") td:eq(0)").html(" <input type='text' id='mycustomid' value='" + cell1 + "' style='width:30px' />");
            $("#myTable tr:eq(" + (rowindex) + ") td:eq(1)").html(" <input type='text' id='mycustomuserId' value='" + cell2 + "' style='width:30px' />");
            $("#myTable tr:eq(" + (rowindex) + ") td:eq(2)").html(" <input type='text' id='mycustomtitle' value='" + cell3 + "' style='width:130px' />");
            $("#myTable tr:eq(" + (rowindex) + ") td:eq(3)").html(" <input type='text' id='mycustomedit' value='" + cell4 + "' style='width:400px' />");

        }

        //on cancel, remove the controls and remove the cancel btn
        function cancelClick(indx)
        {

            //console.log('edit is at row>> rowindex:' + currentEditedIndex);
            indx = currentEditedIndex;

            var cell1 = ($("#myTable #mycustomid").val());
            var cell2 = ($("#myTable #mycustomuserId").val());
            var cell3 = ($("#myTable #mycustomtitle").val());
            var cell4 = ($("#myTable #mycustomedit").val()); 

            $("#myTable tr:eq(" + (indx) + ") td:eq(0)").html(cell1);
            $("#myTable tr:eq(" + (indx) + ") td:eq(1)").html(cell2);
            $("#myTable tr:eq(" + (indx) + ") td:eq(2)").html(cell3);
            $("#myTable tr:eq(" + (indx) + ") td:eq(3)").html(cell4);
            $("#myTable tr:eq(" + (indx) + ") td:eq(4)").find('#cancelBtn').remove();
        }



    </script>

【讨论】：

哦，所以jsonplaceholder.typicode.com/posts 是一个实际的工作网址。