javascript - 如何使用 JQuery 克隆选定的表格行并隐藏原始表格行

Question

我想克隆选定的 (:checked) 表行并使用 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>