如何克隆選定的錶行和隱藏原始錶行使用JQuery

Question

我想克隆選中（：選中）錶行和隱藏原始行的使用JQuery。我想在克隆表中添加刪除功能，並從克隆的表頭刪除複選框..

這裏是我的克隆代碼：

function getAddDetails(){ 

    var srcrow = $('.content_value').has('input:checked'); 
    var lastRow = srcrow.clone(); 
    lastRow.each(function(index, row){ 
     $(row).find('checked').each(function(idx, el){ 
      var el = $(el); 
      el.val(srcrow.eq(index).find('select').eq(idx).val()) 
     }); 
    }); 

    $(".content_head").each(function(i, el) { 
     $(this).closest('.content_head').clone().insertAfter(".content_value:last"); 
    }); 

    $('.content_value').has('input:checked').hide(); 
    var cloned =lastRow.closest('.content_value').clone().insertAfter(".content_head:last"); 
} 

這是HTML代碼：

<tr class="content_head"> 
<td class="tableheader"><input type="checkbox" name="select-all" id="select-all" /></td> 
    <td class="tableheader">ID</td> 
    <td class="tableheader">Name</td> 
    <td class="tableheader">Type</td> 
</tr> 
<% @content.each do |f| %> 
<tr class="content_value"> 
    <td bgcolor="#FBFBFB"> 
    <input type="checkbox" name="checkbox" id="chk" /> 
    </td> 
    <td bgcolor="#FBFBFB"> 
    <%= f.id %> 
    </td> 
    <td bgcolor="#FBFBFB"> 
    <%= f.name %> 
    </td> 
    <td bgcolor="#FBFBFB"> 
    <%= f.type %> 
    </td> 
</tr> 
<% end %> 
<tr> 
<td>&nbsp;</td> 
<td><input type="button" id="button" value="add" onclick="getAddDetails();" class="submit_btn" /></td> 
</tr> 

請推薦。

Answer 1

試試這個

$('#select-all').click(function(event) { 
    if(this.checked) { 
     // Iterate each checkbox 
     $(':checkbox').each(function() { 
      this.checked = true;       
     }); 
    } else { 
    $(':checkbox').each(function() { 
     this.checked = false;       
    }); 
    } 



}); 



function getAddDetails(){ 
    var srcrow = $('.content_value').has('input:checked'); 
    var lastRow = srcrow.clone(); 
    lastRow.each(function(index, row){ 
     $(row).find('checked').each(function(idx, el){ 
      var el = $(el); 
      el.val(srcrow.eq(index).find('select').eq(idx).val()) 
     }); 
    }); 


    $(".conten 

t_head").each(function(i, el) { 
     $(this).closest('.content_head').clone().removeClass('content_head').addClass('clone_content_head').insertBefore(".content_value:first"); 
    }); 

    //$('.content_value:last').append(lastRow); 
    var cloned =lastRow.closest('.content_value').clone().removeClass('content_value').addClass('clone_content_value').insertAfter(".clone_content_head:last"); 
    $(':checkbox').each(function() { 
     this.checked = false;       
    }); 
      $('.content_value').remove(); 
    $('.content_head').remove(); 

    // $('.del').live('click',function(){ 
    // $(this).parent().parent().remove(); 
    // }); 
    } 
</script>