0

ページにテーブルがあり、行の追加ボタンをクリックすると、その行が 2 つの別々のテーブルに複製されます。これら 2 つの個別のテーブルには、各行に削除ボタンがあります。私が達成しようとしているのは、ユーザーがいずれかのテーブルの行で削除ボタンをクリックすると、両方のテーブルから同じ行が削除されることです。

これが私の複製スクリプトです。ご覧のとおり、行は #platetable から 2 つの異なるテーブル (#platetable2 と #platetable3) に複製されます。 

$('#platetable .addPlateItem').live('click', function (e) {
     var row = $(this).closest('tr').clone();
     var row2 = $(this).closest('tr').clone();
     row.find("input.addPlateItem")
        .attr("value", "Delete")
        .attr("class", "deletePlateItem");
     row.find("td.mfrtd")
        .remove("td.mfrtd");
     row2.find("input.addPlateItem")
        .attr("value", "Delete")
     .attr("class", "deletePlateItem");
     row2.find("td.mfrtd")
        .remove("td.mfrtd");
     row2.append('<td><input type="text" id="portionpercase" name="portionpercase" value=""></td>');
     row2.append('<td><input type="text" id="portionperserving" name="portionperserving" value=""></td>');
     row2.append('<td><select id="portionsize" name="portionsize"><option value=""></option><option value="cup">Cup</option><option value="each">Each</option><option value="gallon">Gallon</option><option value="ounce">Ounce</option><option value="pound">Pound</option><option value="quart">Quart</option><option value="tablespoon">Tablespoon</option><option value="teaspoon">Teaspoon</option></select></td>');
     row2.append('<td>$0.00</td>');
     row2.append('<td><input type="text" id="portionperserving" name="portionperserving" value=""></td>');
     row2.append('<td>%0.00</td>');
     row2.append('<td><input type="checkbox" id="activeplate" value=""></td>');
    $('#platetable2 tbody').append(row);
    $('#platetable3 tbody').append(row2);
});

どんな助けでも大歓迎です！

4

1 に答える 1

1

削除する2つの行に同じクラスを割り当てるだけです（IDは良いですが、複製できないので問題外です。クリックイベントを発生させると、削除ボタンがのクラスであると仮定しますdelete-button。削除する行のクラスをどこかに保存するには、削除ボタンの data- 属性に保存することを選択します。

$(document).on("click", ".delete-button", function() 
{
    var rowDelete = $(this).data("row-delete");
    $("#platetable2, #platetable3").find("."+rowDelete).remove();
});

サンプルの HTML マークアップは次のようになります

<td class="(rowClass)">
    (content)
    <button class="delete-button" data-row-delete="(rowClass)" type="button">
        Delete
    </button>
</td>

概念実証のフィドルを作成しました: http://jsfiddle.net/teddyrised/hkUdE/

$(document).ready(function() 
{
    // Start counting at 0
    var rowAdd = 0;

    $("#platetable1 .add-button").click(function() 
    {
        // Create jQuery object
        var $rowClone = $(this).parents("tr").clone();

        // Remove the add button, and add the delete button. 
        // Finally, append to plate table 2 and 3
        $rowClone
            .addClass("row-add-"+rowAdd)
            .find(".button-col")
            .remove()
            .end()
            .append("<td><button type='button' class='delete-button' data-row-delete='row-add-"+rowAdd+"'>Delete</button></td>")
            .appendTo(".placetable-append"); 

        // Whenever a new row is added, increase rowAdd by 1 so that all newly added rows will have a unique class
        rowAdd++;
    });

    // Use .on() so that clicks on dynamically added delete button will be captured
    $(document).on("click", ".delete-button", function() 
    {
        // Fetch the unique rows to delete
        var rowID = $(this).data("row-delete");
        confirmDelete = confirm("Will delete: " + rowID); 
        if(confirmDelete)
        {
            $("table ."+rowID).remove();
        }
    });
});
于 2013-03-07T20:19:24.833 に答える