How to clone selected rows of a table and hide the original table of rows using JQuery
I want to clone selected (: checked) rows of a table and hide the original row using JQuery. I want to add a delete function to a cloned table and remove checkboxes from cloned table heads.
here is my code for the clone:
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");
}
this is the HTML code:
<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> </td>
<td><input type="button" id="button" value="add" onclick="getAddDetails();" class="submit_btn" /></td>
</tr>
Please suggest.
+3
source to share
1 answer
try it
$('#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>
+1
source to share