0

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

$（函数（）{

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

问候

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

$(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-elements 可编辑的代码是这样的：

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

    });
});
});
4

2 回答 2

0

按照我的评论，试试这个解决方案。也许它需要一些调整，因为你没有发布你的 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");
        });
    });
});
于 2013-10-16T09:31:36.423 回答
-1

如果您在准备好的文档上设置了侦听器，那么当您添加新行时，它们不会受到影响。

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

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


});

});

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

于 2013-10-16T08:16:43.790 回答