Question

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

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

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

Answer 1

我使用Data tables (a jQuery plugin)因为这会使一切变得更加简单。

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

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

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

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

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

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

Answer 4

您可能需要查看jqGrid插件。

Answer 5

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

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

Answer 6

使用jQuery Editable之类的插件可以实现内容的可编辑。如果转换到没有id的表格上会有多容易，我不确定。

要遍历你的表（我假设你的表有自己的ID或者是页面上唯一的表），如果你能够让这个插件正常工作，那将是相当直接的：

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

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

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

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

最后，jqGrid可能是一个不错的选择，具体取决于您在表格中所需的数据。

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

Answer 8

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

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

Answer 9

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

Answer 10

这实际上是如此直接，这是我的HTML，jQuery示例..它就像一个魅力，我使用在线json数据样本构建所有代码。欢呼声

＆LT;＆LT; HTML＆gt;＆gt;

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

＆LT;＆LT; jQuery＆gt;＆gt;

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

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

10 个答案: