0

ダブルクリックでテーブルの内容を編集するために、jqueryでこの非常に優れたスクリプトを見つけました。今、ボタンを追加してテーブルに機能を追加しようとしています。追加しようとしている最初の機能は「追加」です。私のフィドルを見てください。

現時点では、すべてが正常に機能しているようです。ただし、追加をクリックして行を追加すると、他の行のように内容を編集できません

HTML

<table class="editableTable">
    <thead>
        <tr>
            <th>Code</th>
            <th>Name</th>
            <th>Email</th>
            <th>Phone</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>001</td>
            <td>Pedro Fernandes</td>
            <td>pedro.ferns@myemail.com</td>
            <td>(21) 9999-8888</td>
        </tr>     

    </tbody>
</table>
<td style="text-align:center;">
    <button onclick="addrecord()" >Add</button></td>

Jクエリ

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

        $(this).addClass("cellEditing");
        $(this).html("<input type='text' value='" + OriginalContent + "' />");
        $(this).children().first().focus();

        $(this).children().first().keypress(function (e) {
            if (e.which == 13) {
                var newContent = $(this).val();
                $(this).parent().text(newContent);
                $(this).parent().removeClass("cellEditing");
            }
        });

        $(this).children().first().blur(function () {
            $(this).parent().text(OriginalContent);
            $(this).parent().removeClass("cellEditing");
        });
    });
});
function addrecord(){
      $('<tr><td>004</td><td></td><td></td><td></td></tr>').appendTo('table');     
}
4

4 に答える 4

4

変化する

$("td").dblclick(function () {

に

$(".editableTable").on("dblclick", "td", function () {

2 つの違いは、前者は既存の TD にイベントを追加しますが、動的に追加された TD には同じイベントを追加しないことです。これは、達成しようとしています。ただし、後者は、動的に追加されたすべての TD も処理します。

于 2013-07-19T12:00:48.603 に答える
0

ダブルクリック可能にするコードは最初にのみ実行されるため、作成する新しい行にはコードが適用されません。本当に汚いハックは、コードを関数にコピーすることですが、他の方法もあるはずです。

    function addrecord(){
      $('<tr><td>004</td><td></td><td></td><td></td></tr>').appendTo('table');     
      $("td").dblclick(function () {
        var OriginalContent = $(this).text();

        $(this).addClass("cellEditing");
        $(this).html("<input type='text' value='" + OriginalContent + "' />");
        $(this).children().first().focus();

        $(this).children().first().keypress(function (e) {
            if (e.which == 13) {
                var newContent = $(this).val();
                $(this).parent().text(newContent);
                $(this).parent().removeClass("cellEditing");
            }
        });

        $(this).children().first().blur(function () {
            $(this).parent().text(OriginalContent);
            $(this).parent().removeClass("cellEditing");
        });
    });
}
于 2013-07-19T12:04:00.257 に答える
0

OK、静的テーブルがあり、各 td にイベント リスナーを登録してから、新しい行を追加します。もちろん、その時点でクリック リスナーはありません。新しい行を作成した後、リスナーを登録する必要があります。

var row = $('<tr><td>004</td><td></td><td></td><td></td></tr>');
row.find("td").dblclick(mylistener)
row.appendTo('table');
于 2013-07-19T12:04:36.937 に答える
-1

.live はトリックを行います..

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

    $(this).addClass("cellEditing");
    $(this).html("<input type='text' value='" + OriginalContent + "' />");
    $(this).children().first().focus();

    $(this).children().first().keypress(function (e) {
        if (e.which == 13) {
            var newContent = $(this).val();
            $(this).parent().text(newContent);
            $(this).parent().removeClass("cellEditing");
        }
    });

    $(this).children().first().blur(function () {
        $(this).parent().text(OriginalContent);
        $(this).parent().removeClass("cellEditing");
    });
});
});
function addrecord(){
  $('<tr><td>004</td><td></td><td></td><td></td></tr>').appendTo('table');     
}
于 2013-07-19T12:01:06.807 に答える