0

背景は次のとおりです。新しい行を追加するボタンを備えた編集可能なテーブルを取得しました。次で始まる2つの関数も取得しました。

$(関数 () {

これらの関数を使用すると、ユーザーは行を編集でき、ユーザーはそのテーブルに物をドラッグ アンド ドロップすることもできます。ただし、他のすべての行と同じクラスであっても、最近追加された行ではなく、通常の行に対してのみ機能します。新しく追加された行でも機能するように、関数を変更する必要があるのでしょうか? はいの場合 - それを行う方法は? それとも別の問題ですか？

よろしく

編集:テーブル行を追加するボタンのコードは次のとおりです。

$(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 に答える