Question

背景是：我有一个可编辑的表，其中包含一个添加新行的按钮。我还有两个函数，它们以：

开头

$（function（）{

这些函数允许用户编辑行，用户也可以将内容拖放到该表中。但它只适用于普通行，而不是最近添加的行，即使它们与所有其他行具有相同的类。是否必须修改功能，以便它们也适用于新添加的线路？如果是的话 - 怎么做？还是另一个问题？

此致

编辑：这是我添加表格行的按钮的代码：

$(function () {
    $("#editableTable").on('click', 'input.addButton', function () {

          var nexttr = $(this).closest('tr');
          $(nexttr).next().before('\n<tr class=\"sortable-row ui-droppable\">\n<td>entry 1</td>\n<td>entry 2</td>\n<td>entry 2</td>\n<td>entry 4</td>\n<td>entry 5</td>\n<td>entry 6 </td>\n<td>entry 7</td>\n<td>entry 8</td>\n<td><input type=\'button\' class=\'addButton\' value=\'add row\' /></td>\n<td><input type=\'button\' class=\'deleteButton\' value=\'delete row\' /></td>\n</tr>\n');
          oddRowColor(); //changes color in every second row
    });
});

使td元素可编辑的代码是：

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

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

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

    $(this).children().first().blur(function (e) {
        $(this).parent().text(OriginalContent);
        $(".cellEditing").removeClass("cellEditing");

    });
});
});

Answer 1

根据我的评论，试试这个解决方案。也许它需要一些调整，因为你没有发布你的HTML标记：

$(function () {
    $("#editableTable").delegate('input.addButton', 'click', function () {
        var nexttr = $(this).closest('tr');
        var newtr = $('<tr />', { class: 'sortable-row ui-droppable' });

        for (var i = 1; i <= 8; i++) {
            var newtd = $('<td />').html('entry ' + i.toString());
            newtr.append($(newtd));
        }

        var newtdaddbutton = $('<td />');
        var newaddbutton = $('<button />', { class: 'addButton' }).html('add row');
        newtdaddbutton.append($(newaddbutton));
        newtr.append($(newtdaddbutton));

        var newtddelbutton = $('<td />');       
        var newdelbutton = $('<button />', { class: 'deleteButton' }).html('delete row');
        newtddelbutton.append($(newdelbutton));
        newtr.append($(newtddelbutton));

        $(nexttr).next().before($(newtr));

        oddRowColor(); //changes color in every second row
    });

    $("#editableTable").delegate('td', 'dblclick', function () {
        var OriginalContent = $(this).text();

        $(this).addClass("cellEditing");
        var textinput = $('<input />', { type: 'text', id: 'textinput', size: 100, value: OriginalContent });
        $(this).html($(textinput));
        $(this).children().first().focus();

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

        $(this).children().first().blur(function (e) {
            $(this).parent().text(OriginalContent);
            $(".cellEditing").removeClass("cellEditing");
        });
    });
});

Answer 2

如果您在文档准备就绪时设置了侦听器，则在添加新行时它们不会受到影响。

单击添加行时，必须在行上添加侦听器。

//Start function on ready
$(function () {

$('.rowClass').draggable().click(function(){
//your code here
});


$('btnAdd').click(function(){
//add new row code
var newRow = $('<tr class="rowClass">');
newRow.draggable().click(function(){
//the same code here
});


});

});

我不知道你如何制作表格，但逻辑就在那里，再见。

当文档准备好并且文档发生变化时，应该初始化的jquery函数的语法是什么？

2 个答案: