Reputation: 798
I need to move data of a table which are selected with checkbox to another table. Likewise we can remove from the 2nd table, then the removed item will come back to the master table. I have done this with my basic knowledge on jQuery
. But I'm not satisfied on my work. Being a jQuery
beginner, I think this can be done more efficiently. I need some ideas from experts..
thanking in advance.
$(document).ready(function(){
$("body").on('click', '.loadStu', function(e){
var rowCount = $('.newClsStuList tr').length;
var i = rowCount;
$(".stuList:checked").each(function(){
var stuFulDetl = $(this).data("value");
stuDetl = stuFulDetl.split('|');
//alert (stuDetl[3]);
$('#stuLoadList_'+stuDetl[3]).remove();
var stuList = '<tr id="stListTr_'+ i +'"><td> '+ i +'</td>';
stuList += '<td> '+stuDetl[1]+'</td>';
stuList += '<td> '+stuDetl[2]+'</td>';
stuList += '<td> <a href="" class="remStu" id="stList_'+i+'" data-value="'+ i +'|' + stuFulDetl+' "> remove </a> </td> </tr>';
$('.newClsStuList').append(stuList).slideDown('slow');
$('#stListTr_'+ i).hide().fadeIn("slow");
i++ ;
});
var k = 1;
var chkBxDet ;
$('.ClsStuList').find('tr:not(.thClas)').each(function (j, el) {
var $tds = $(this).find('td');
if($tds.eq(1).text() != ''){
var x = 1;
var nwchkBxDet = '';
var chkBxDet = $('#stuHidn_'+ $tds.eq(0).text().trim()).val();
//var ck = '#stuHidn_'+($tds.eq(0).text()).trim() ;
//alert($tds.eq(1).text() + ' - '+ $tds.eq(0).text() + ' - '+ j + ' - '+ ck + ' hidn : '+ chkBxDet);
chkBxDet = chkBxDet.split('|');
while(x < 4){
var ml = x -1 ;
nwchkBxDet += chkBxDet[ml] +'|';
x++ ;
}
nwchkBxDet += k ;
var newChkBx = '<input type="checkbox" name="stu_id[]" class="stuList" data-value="'+ nwchkBxDet + '" />';
var hidnFild = '<input type="hidden" id="stuHidn_'+ k +'" value="'+ nwchkBxDet + '" />';
$('#stuLoadList_'+k).remove();
var stuList = '<tr id="stuLoadList_'+ k +'"><td> '+ k +'</td>';
stuList += '<td> '+$tds.eq(1).html()+'</td>';
stuList += '<td align="center" width="40px"> '+newChkBx+' ' + hidnFild + '</td> </tr>';
$('.ClsStuList').append(stuList);
$('#stuLoadList_'+ k ).hide().fadeIn("slow");
k++;
}
$(this).remove();
});
});
$('body').on('click','.remStu', function(e){
e.preventDefault();
var countOfStu = $('.ClsStuList tr').length ;
var fulDet = $(this).data("value");
var fulDetAry = fulDet.split('|');
var remID = fulDetAry[0].trim();
var nwchkBxDet = fulDetAry[1]+'|'+fulDetAry[2]+'|'+fulDetAry[3]+'|'+countOfStu;
var stuNam = fulDetAry[2]+' - '+fulDetAry[1];
var newChkBx = '<input type="checkbox" name="stu_id[]" class="stuList" data-value="'+ nwchkBxDet + '" />';
var hidnFild = '<input type="hidden" id="stuHidn_'+ countOfStu +'" value="'+ nwchkBxDet + '" />';
var stuList = '<tr id="stuLoadList_'+countOfStu +'"><td> '+ countOfStu +'</td>';
stuList += '<td> '+stuNam+'</td>';
stuList += '<td align="center" width="40px"> '+newChkBx+' ' + hidnFild + '</td> </tr>';
$('.ClsStuList').append(stuList);
$('#stListTr_'+remID).remove();
$('.newClsStuList').find('tr:not(.thClas)').each(function (i, el) {
var $tds = $(this).find('td');
var k = i + 1;
if( $tds.eq(1).text() != ''){
var rowNo = $tds.eq(0).text().trim();
var remDet = $('#stList_'+rowNo).data("value");
var remDetArry = remDet.split('|');
$('#stListTr_'+rowNo).remove();
var x = 1;
var ckBxDet = k;
while(x < 4){
ckBxDet += '|'+remDetArry[x];
x++;
}
var stuList = '<tr id="stListTr_'+k +'"><td> '+ k +'</td>';
stuList += '<td> '+$tds.eq(1).text()+'</td>';
stuList += '<td> '+$tds.eq(2).text()+'</td>';
stuList += '<td> <a href="#" class="remStu" id="stList_'+k+'" data-value="'+ ckBxDet +'"> remove </a> </td> </tr>';
$('.newClsStuList').append(stuList);
$('#stListTr_'+ k).hide().fadeIn("slow");
}
});
});
});
http://jsfiddle.net/nsk21/73z9f00g/
Upvotes: 0
Views: 2071
Reputation: 611
What you've done is okay, but you can use jQuery and select larger groups of objects instead of manipulating all the data of the children. A more elegant solution can be found by copying/removing the table row instead of finding the values of all of the columns and using an array as you have done above.
Something like this:
http://jsfiddle.net/73z9f00g/4/
JS:
$(document).ready(function(){
$("body").on('click', '.loadStu', function(e){
fade = false;
$(".ClsStuList td input:checked").each(function(){
tr = $(this).parent().parent();
tr.append($("<td>", {
class:"remStu",
html:"Remove",
style:"text-decoration:underline;cursor:pointer"
}));
tr.find("input:checked").attr("checked", false);
$(".newClsStuList").append(tr.clone());
tr.remove();
fade = true;
});
if (fade) FadeIn();
})
$("body").on('click', '.remStu', function(e){
tr = $(this).parent();
tr.find(".remStu").remove();
$(".ClsStuList").append(tr.clone());
tr.remove();
FadeIn();
})
});
function FadeIn(){
$(".ClsStuList, .newClsStuList").hide().fadeIn();
};
Upvotes: 1