Question

我需要将带有复选框的表格数据移动到另一个表格。同样，我们可以从第二个表中删除，然后删除的项目将返回到主表。我用jQuery的基本知识完成了这项工作。但我对自己的工作并不满意。作为jQuery初学者，我认为这可以更有效地完成。我需要专家的一些想法..

提前感谢。

$(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> &nbsp; <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> &nbsp; <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/

Answer 1

你做的很好，但你可以使用jQuery并选择更大的对象组，而不是操纵孩子们的所有数据。通过复制/删除表行而不是查找所有列的值并使用上面的数组，可以找到更优雅的解决方案。

这样的事情：

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();
};

jQuery：将表的数据移动到另一个表

1 个答案: