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

Question

如何使用jQuery点击表格单元格并编辑其内容。其中有一列包含几个段落的数据，因此如果可能的话，请使用一个弹出窗口，其中包含一个大文本区域（或理想情况下是HTML编辑器）。

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

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

- mrpatg

Answer 1

考虑到此页面已经存在3年且在谷歌搜索结果中排名第一，我认为它需要一个更加实时的答案。鉴于上面的插件选项的重量和复杂性，我认为对于那些寻求替代方案的人来说，一个更简单、没有花哨、更直接的解决方案也可能会更受欢迎。

这将表格单元格替换为文本输入，并调用自定义事件，以便您可以在保存、关闭、失焦等情况下处理任何用例...

在这种情况下，改变单元格中的信息的唯一方法是按回车键，但如果您愿意，您可以自定义它，例如，您可能希望在失焦时保存。

在此示例中，您还可以按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();

- Strixy

---

这对我不起作用 - 就算是像 $('td').makeEditable(); 这样简单的代码也不能使页面上唯一的表格中的任何单元格可编辑。 - jimiayler

Answer 2

我使用 Data tables (一个jQuery插件)，因为它使一切变得更加简单。

他们还建议使用jEditable插件与他们的插件一起使用。这允许行变得可编辑: 链接：可编辑表格（包括代码示例）

- Andrew

Answer 3

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

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

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

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

- markouuu

Answer 4

你可能想要检查jqGrid插件。

- Daniel Moura

Answer 5

jEditable插件可以帮助您直接在表格中进行编辑。

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

- RaYell

Answer 6

使内容可编辑可以通过像jQuery Editable这样的插件实现。然而，如果表格没有ID，那么将其翻译成易于理解的形式可能会有些困难。

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

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

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

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

假设您在对话框中放置了一个富文本编辑器，您可以使用$.ajax()将结果发布到服务器端的某个服务。最后，根据您需要在表格中显示的数据，jqGrid可能是一个不错的选择。

- Phil.Wheeler

Answer 7

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);
        });                  
    });
});

- Murat Kazanova

---

#overlay元素是什么？它是一个文本输入元素吗？ - Nilesh

overlay是一个div元素的id，我在其中放置了textarea和一个链接按钮（id为“closelink”）。 - Murat Kazanova

Answer 8

这其实非常简单，这是我的HTML、jQuery示例...它像魔法一样工作，我使用在线JSON数据示例构建了所有代码。干杯。

<< HTML >>

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

<< jQuery >>

<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>

- Mahmoud Sayed

---

哦，所以http://jsonplaceholder.typicode.com/posts是一个实际可用的URL。 - Kari Kääriäinen

Answer 9

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

可能比这更复杂，但是在没有看到你的HTML之前，这就是基本想法。

- brettkelly

---

我尝试过了，它只是使单元格消失了，变成了空的。 - mrpatg

Answer 10

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

- HRJ