2014-10-20 47 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