使用Jquery向HTML表添加记录

Adding a record to HTML table using Jquery

本文关键字：添加 加记录 HTML Jquery 使用      更新时间：2023-09-26

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

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(function () {

至

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

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

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

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

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

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

使用on（），因为live（）已取消定价

.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');     
}
相关文章：