Javascript 使用Jquery向HTML表添加记录

我在jquery中发现了这个非常好的脚本，可以在双击时编辑表的内容。 现在我试图通过添加按钮向表中添加更多功能。 我尝试添加的第一个函数是“add”。 看看我的电脑，事情就会清楚了

此刻一切似乎都正常。但是，当我单击add添加一行时，它不允许我像编辑其他行一样编辑内容

HTML

代码
名称
电子邮件
电话
001
佩德罗·费尔南德斯
佩德罗。ferns@myemail.com
(21) 9999-8888
添加

JQUERY

$(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');     
}

$（函数（）{
$（“td”）.dblclick（函数（）{
var OriginalContent=$（this.text（）；
$（this.addClass（“cellEditing”）；
$（this.html（“”）；
$（this.children（）.first（）.focus（）；
$（this）.children（）.first（）.keypress（函数（e）{
如果（e.which==13）{
var newContent=$（this.val（）；
$（this）.parent（）.text（newContent）；
$（this.parent（）.removeClass（“cellEditing”）；
}
});
$（this）.children（）.first（）.blur（函数（）{
$（this.parent（）.text（原始内容）；
$（this.parent（）.removeClass（“cellEditing”）；
});
});
});
函数addrecord（）{
$（'004'）。附录（'table'）；
}

更改

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

到

两者之间的区别在于前者将事件添加到现有TDs中，但不会在动态添加的任何TD上添加相同的事件，而您正试图实现这一点。但是，后者也会处理动态添加的任何TD。

更改

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

到

---

两者之间的区别在于前者将事件添加到现有TDs中，但不会在动态添加的任何TD上添加相同的事件，而您正试图实现这一点。不过，后者也会处理任何动态添加的TD。

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

$（函数（）{
$（“td”）.live（“dblclick”，函数（）{
var OriginalContent=$（this.text（）；
$（this.addClass（“cellEditing”）；
$（this.html（“”）；
$（this.children（）.first（）.focus（）；
$（this）.children（）.first（）.keypress（函数（e）{
如果（e.which==13）{
var newContent=$（this.val（）；
$（this）.parent（）.text（newContent）；
$（this.parent（）.removeClass（“cellEditing”）；
}
});
$（this）.children（）.first（）.blur（函数（）{
$（this.parent（）.text（原始内容）；
$（this.parent（）.removeClass（“cellEditing”）；
});
});
});
函数addrecord（）{
$（'004'）。附录（'table'）；
}

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

$（函数（）{
$（“td”）.live（“dblclick”，函数（）{
var OriginalContent=$（this.text（）；
$（this.addClass（“cellEditing”）；
$（this.html（“”）；
$（this.children（）.first（）.focus（）；
$（this）.children（）.first（）.keypress（函数（e）{
如果（e.which==13）{
var newContent=$（this.val（）；
$（this）.parent（）.text（newContent）；
$（this.parent（）.removeClass（“cellEditing”）；
}
});
$（this）.children（）.first（）.blur（函数（）{
$（this.parent（）.text（原始内容）；
$（this.parent（）.removeClass（“cellEditing”）；
});
});
});
函数addrecord（）{
$（'004'）。附录（'table'）；
}

使其可双击的代码仅在开始时运行，因此代码不会应用于您创建的任何新行。一个真正肮脏的黑客就是把代码复制到你的函数中，尽管肯定还有其他的方法

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

函数addrecord（）{
$（'004'）。附录（'table'）；
$（“td”）.dblclick（函数（）{
var OriginalContent=$（this.text（）；
$（this.addClass（“cellEditing”）；
$（this.html（“”）；
$（this.children（）.first（）.focus（）；
$（this）.children（）.first（）.keypress（函数（e）{
如果（e.which==13）{
var newContent=$（this.val（）；
$（this）.parent（）.text（newContent）；
$（this.parent（）.removeClass（“cellEditing”）；
}
});
$（this）.children（）.first（）.blur（函数（）{
$（this.parent（）.text（原始内容）；
$（this.parent（）.removeClass（“cellEditing”）；
});
});
}

使其可双击的代码仅在开始时运行，因此代码不会应用于您创建的任何新行。一个真正肮脏的黑客就是把代码复制到你的函数中，尽管肯定还有其他的方法

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

函数addrecord（）{
$（'004'）。附录（'table'）；
$（“td”）.dblclick（函数（）{
var OriginalContent=$（this.text（）；
$（this.addClass（“cellEditing”）；
$（this.html（“”）；
$（this.children（）.first（）.focus（）；
$（this）.children（）.first（）.keypress（函数（e）{
如果（e.which==13）{
var newContent=$（this.val（）；
$（this）.parent（）.text（newContent）；
$（this.parent（）.removeClass（“cellEditing”）；
}
});
$（this）.children（）.first（）.blur（函数（）{
$（this.parent（）.text（原始内容）；
$（this.parent（）.removeClass（“cellEditing”）；
});
});
}

好的，您有一个静态表，在每个td上注册事件侦听器，然后添加新行。当然，在这一点上没有单击侦听器。创建新行后需要注册侦听器：

var row = $('<tr><td>004</td><td></td><td></td><td></td></tr>');
row.find("td").dblclick(mylistener)
row.appendTo('table');

var行=$（'004'）；
row.find（“td”）.dblclick（mylistener）
行。附录（'表'）；

好的，您有一个静态表，在每个td上注册事件侦听器，然后添加新行。当然，在这一点上没有单击侦听器。创建新行后需要注册侦听器：

var row = $('<tr><td>004</td><td></td><td></td><td></td></tr>');
row.find("td").dblclick(mylistener)
row.appendTo('table');

var行=$（'004'）；
row.find（“td”）.dblclick（mylistener）
行。appendTo（'表