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

ReynierPM 发表于 Dev

雷尼埃

我有这段代码用于将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即使所有标记都被标记也不会克隆任何复选框
如何避免两次clone/copy相同tr？
是否可以在克隆之前修改该复选框？如果看一下示例，您会注意到克隆tr副本是如何完全复制模态中的副本的，而我想先取消选中该复选框，这有可能吗？

这是一个小玩弄，有什么建议吗？

比尔吉特·马丁内尔（Birgit Martinelle）

主要问题在于，当您以编程方式将其设置为选中状态时，表内的复选框并未真正正确触发。为确保正确触发所有关联的事件，您应该改为触发.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');
                }

            });