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

Some questions around clone/copy TR

本文关键字：问题 TR 于克隆 复制      更新时间：2023-09-26

我有这段代码用于将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);
        }
    });
});

但我遇到了一些问题：

  1. 如果我使用表头上的第一个复选框标记所有复选框，则代码将停止工作，并且不会克隆任何tr，即使所有复选框都已标记
  2. 如何避免两次使用相同的tr来clone/copy
  3. 是否可以在克隆之前修改复选框？如果你看一下这个例子，你会注意到克隆tr是如何与模态上的复制完全一样的，并且我想先取消选中复选框，这是可能的吗

这是一把小提琴，有什么建议吗？

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

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

为了确保不会出现重复的克隆，最简单的方法是不要在一批中克隆所有行，而是迭代它们，并将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/

以下是关于比较表行的更多信息：比较两个表行并删除匹配的

下面是关于使用.click（）的更详细的答案需要复选框更改事件来响应以编程方式完成的选中状态的更改

相关文章：