0

我在页面上有一个表格，我可以在其中单击一行上的添加按钮，它将将该行克隆到两个单独的表格中。这两个单独的表的每一行都有一个删除按钮。我想要实现的是，当用户单击任一表上一行上的删除按钮时，它将从两个表中删除同一行。

这是我的克隆脚本。如您所见，一行从#platetable 克隆到两个不同的表——#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

只需将相同的类分配给您要删除的两行（ID 很好，但它们不能重复，所以这是不可能的。当您触发 click 事件时，假设您的删除按钮是类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 回答