web-dev-qa-db-ja.com

jQueryを使用して個々のテーブルセルを編集する

JQueryを使用してテーブルセルをクリックし、その内容を編集するにはどうすればよいですか。データのいくつかの段落を含む特定の列があるため、可能であれば、大きなテキスト領域（または理想的にはHTMLエディター）を備えたポップアップウィンドウを用意します。

別のjQueryプラグインを使用してテーブルの内容をスクレイプし、それを別の場所にエクスポートしているため、変更は表面的なものである必要があります。

難しさ、どのセルも一意の名前やIDを持つことはできません。

jqueryhtmlhtml-table
14
mrpatg

jqGrid プラグインを確認することをお勧めします。

4
Daniel Moura

データテーブル（jQueryプラグイン） を使用します。これにより、すべてが非常に簡単になります。

彼らはまた、プラグインでjEditableプラグインを使用すると言います。行を編集可能にすることができます： リンク：編集可能なテーブル （コードサンプルを含む）

12
Andrew

このページが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();
11
Strixy

この簡単な解決策を試してください：

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

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

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

jEditable プラグインは、テーブルを適切に編集するのに役立ちます。

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

コンテンツを編集可能にすることは、 jQuery Editable oneのようなプラグインで実現できます。 IDのないテーブルに変換するのがどれほど簡単かはわかりませんが、わかりません。

あなたのテーブルをトラバースすること（そしてあなたのテーブルがそれ自身のIDを持っているか、ページ上の唯一のテーブルであると私は仮定しています）は、そのプラグインを機能させることができればかなり簡単です：

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

しかし、それはあなたが求めているリッチテキストエディタをあなたに与えません。もう1つのアプローチは、そのプラグインを忘れて、jQueryUIダイアログを使用してみることです。

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

そのダイアログにリッチテキストエディターを配置すると仮定すると、$。ajax（）を使用して、サーバー側のサービスに結果を投稿できます。

最後に、テーブルに必要なデータによっては、 jqGrid が適切なオプションになる場合があります。

3
Phil.Wheeler

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);
        });                  
    });
});
2
Murat Kazanova
$("td").click(function(event){
    var myText = '';
    $("myOverlayThing").show();
    $("myOverlayThingCloseLink").click(function(event){
        event.preventDefault();
        myText = $("myOverlayThing.textarea").val();
    });
    $(this).html(myText);
});

おそらくそれよりも少し複雑ですが、それはHTMLを見ない基本的な考え方です。

1
inkedmn

JQuery Datatables Editable プラグインは、公式のEditable Tableプラグインよりも優れているようです。これは、前者がインライン編集をサポートし、オープンソースであるためです。

1
HRJ

これは実際にはとても簡単です。これは私の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>
1
Mahmoud Sayed