我在jquery中发现了这个非常不错的脚本,可以双击编辑表的内容。
现在,我正在尝试通过添加按钮向表添加更多功能。
我要添加的第一个功能是“添加”。
看看我的fiddle,事情会很清楚

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

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

关于javascript - 使用Jquery向HTML表添加记录,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/17745526/

10-12 00:04
查看更多