Question

我有这个代码用于克隆/复制从模态到页面的tr元素。

$(function () {
    $('#toggleCheckbox').on('click', function () {
        var $toggle = $(this).is(':checked');
        $("input:checkbox").attr('checked', $toggle);
        $('#btnAplicarNorma').prop('disabled', !$toggle);
    });

    $('#resultadoNormaBody').on('change', 'input[type=checkbox]', function () {
        var $my_checkbox = $(this);
        var $my_tr = $my_checkbox.closest('tr');
        if ($my_checkbox.prop('checked')) {
            $my_tr.addClass('copyMe');
        }

        var $all_checkboxes = $my_checkbox.closest('tbody').find('input[type=checkbox]');

        $all_checkboxes.each(function () {
            if ($(this).prop('checked')) {
                $('#btnAplicarNorma').prop('disabled', false);
                return false;
            }

            $('#btnAplicarNorma').prop('disabled', true);
        });
    });

    $('button#btnAplicarNorma').on('click', function (ev) {
        var $tr_to_append = $('#resultadoNormaBody').find('tr.copyMe');

        $('#tablaNorma').removeAttr('style');
        $('#alertSinNorma').hide();

        if ($tr_to_append.length) {
            $tr_to_append.find('input[type=checkbox]').prop('checked', false);
            $tr_to_append.clone().appendTo('#normaBody').removeClass('copyMe');
            $tr_to_append.removeClass('copyMe');
            $(this).prop('disabled', true);
        }
    });
});

但我遇到了一些问题：

如果我使用表头上的第一个复选框标记所有复选框，那么即使所有tr都标记为<{li>，代码也会停止工作并且不会克隆任何clone/copy
如何避免两次tr同一tr？
可以在克隆之前修改复选框吗？如果你看一下这个例子，你会注意到克隆{{1}}如何完全复制模态，我想先取消选中复选框，这可能吗？

Here是一个小提琴，任何建议吗？

Answer 1

主要问题是，当您以编程方式设置它们时，表中的复选框无法正确触发。要确保所有相关事件都被正确触发，您应该触发.click（）事件：

  $("#resultadoNormaBody").find("input:checkbox").click();

要确保您不会遇到重复克隆，最简单的方法是不要在一个批处理中克隆所有行，而是通过它们进行迭代，并将html与已添加的html进行比较，如下所示：：

//fetch all the rows that have already been cloned
            var clonedRows = $("#normaBody").find("tr");

            //iterate thru all the rows that have been checked
            $.each($tr_to_append, function (i, v) {
                var added = false;  
                //fetch their html (for easier compare)
                var currentRowHtml = $(v).html();
                //now compare against the rows that have already been cloned
                $.each(clonedRows, function (i, cRow) {
                    var clonedRowHtml = $(cRow).html();
                    if (currentRowHtml == clonedRowHtml) {
                        added = true;
                    }
                });
                //if the row hasn't been added yet- go ahead and clone it now
                if (!added) {
                    $(v).clone().appendTo('#normaBody').removeClass('copyMe');
                }

            });

这是指向您更新过的小提琴的链接： http://jsfiddle.net/wq51zL9x/4/

以下是有关比较表格行的更多信息：Compare two tables rows and remove if match

这里是使用.click（）的更精细的答案 Need checkbox change event to respond to change of checked state done programmatically

关于克隆/复制TR的一些问题

1 个答案: