2014-10-20 66 views
1

我有这段代码克隆/复制tr元素从模态到页面。克隆/副本周围的一些问题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. 我该如何避免与clone/copy相同的tr两次?
  3. 克隆它之前可以修改复选框吗?如果你看一下这个例子,你会注意到克隆tr如何复制到模态上,我想先取消复选框,这可能吗?

Here是一个小提琴玩,任何意见?

回答

1

主要的问题是当你以编程方式将它们选中时,你的表格中的复选框并没有真正被触发。为了确保所有相关的活动得到适当的触发你应该触发。点击()事件,而不是:

$("#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/

下面是更多的一些信息比较t能够行:Compare two tables rows and remove if match

和这里的更详细的答案。点击使用() Need checkbox change event to respond to change of checked state done programmatically