2-列头的操作：列头的拖动（改变位置），拖拽（修改宽度）

2-1列头拖动：

      修改位置，通过insertAfter,insertBefore,通过判断索引值的大小来确定是插入到前边还是后边。

var iNow; //点击的索引。
$('.tab1 .th th').mousedown(function (e) {
    iNow = $(this).index();
//给鼠标添加样式。
    $('.tab1 .th th').css('cursor', 'e-resize').find('i').hover(function () {
        $(this).css('cursor', 'e-resize');
    });
}).mouseup(function () {

$('.tab1 .th th').css({'cursor': 'default'}).find('i').hover(function () {
        $(this).css('cursor', 'pointer');
    });
//鼠标放下时的索引。
    var iNow2 = $(this).index();
//索引是1的禁止拖拽。
    if (iNow == 0 || iNow2 == 0) {
        return false;
    }
    if (iNow < iNow2) {
        $('.tab1 .th th').eq(iNow).insertAfter($('.tab1 .th th').eq(iNow2));
        $('.tab1 .tf th').eq(iNow).insertAfter($('.tab1 .tf th').eq(iNow2));
        $('.tab1 .td  tr').each(function () {
            $(this).find('td').eq(iNow).insertAfter($(this).find('td').eq(iNow2));
        });
    //因为数据是请求来的，拖拽之后表格的宽度会乱掉，重新赋值。
        $('.tab1 .th th').each(function (i) {
            var ww = $('.tab1 .th th').eq(i).width();
            $('.tab1 .tf tr.xj').find('th').eq(i).width(ww);
            $('.tab1 .tf tr.zj').find('th').eq(i).width(ww);
        })
    } else if (iNow > iNow2) {
        $('.tab1 .th th').eq(iNow).insertBefore($('.tab1 .th th').eq(iNow2));
        $('.tab1 .tf th').eq(iNow).insertBefore($('.tab1 .tf th').eq(iNow2));
        $('.tab1 .td  tr').each(function () {
            $(this).find('td').eq(iNow).insertBefore($(this).find('td').eq(iNow2));
        });
        $('.tab1 .th th').each(function (i) {
            var ww = $('.tab1 .th th').eq(i).width();
            $('.tab1 .tf tr.xj').find('th').eq(i).width(ww);
            $('.tab1 .tf tr.zj').find('th').eq(i).width(ww);
        });
    }
});

 

2-2拖拽列头（修改宽度）：

2-3移动行，列：

有两个按钮来控制上下，点击时判断是那一个按钮。

$('.btn').click(function () {
    var that = $(this)
    $('.tab1 .td tr').each(function () {
        if ($(this).attr('class') == 'trClass') {
            if (that.text() == '上一行') {
                var insert = $(this);
                var tr = insert.prev('tr');
                tr.before(insert);
            } else {
                var insert = $(this);
                var tr = insert.next('tr');
                tr.after(insert);
            }
        }
    })
})，
，after,before,insetafter,insertbefore:后者是在已有的基础上进行插入，可以理解为互换位置，前者是插入一个没有的东西。

2-4表格插入行，列，表格：

如果要求细致，会用到colspan属性，横跨表格多少列，rowspan等。
与表格行移动的原理一致，只需用after,before，在当前表格的基础上前后插入一行tr,在tr中拼入td，因为只有td中才可以插入表格table.

2-5表格显隐（hide/show）:

显隐使用checkbox,

var toggle = true;
$('.bt .btn1').click(function () {
    if(toggle == true){
        var str1 = '';
        $('.tab1 .th th').each(function (i) {
            if ($(this).index() != 0) {
                str1 = '<li class="lili"><input type="checkbox" checked /><span val="' + i + '">' + ($(this).text()) + '</span></li>';
                $('.bt #t_show ').append(str1);
            }
        });
        $('.lili input').click(function () {
            var index = $(this).parent().index();
            if ($(this).is(':checked')) {
                //显示
                $('.tab1 .th th').eq(index).attr('yc','false');
                $('.tab1 .td tr').each(function(){
                    $(this).find('td').eq(index).attr('yc','false');
                });
                $('.tab1 .tf tr').each(function(){
                    $(this).find('th').eq(index).attr('yc','false');
                });
            } else {
                //隐藏
                $('.tab1 .th th').eq($(this).parent().index()).attr('yc','true');
                $('.tab1 .td tr').each(function(){
                    $(this).find('td').eq(index).attr('yc','true');
                });
                $('.tab1 .tf tr').each(function(){
                    $(this).find('th').eq(index).attr('yc','true');
                });
            }
            $('.tab1 .th th').each(function(){
                if($(this).attr('yc')=='true') {
                    $(this).hide();
                }else{
                    $(this).show();
                }
            });
            $('.tab1 .th td').each(function(){
                if($(this).attr('yc')=='true') {
                    $(this).hide();
                }else{
                    $(this).show();
                }
            });
            $('.tab1 .tf th').each(function(){
                if($(this).attr('yc')=='true') {                                   
              $(this).hide();                
             }else{                   
              $(this).show();                
             }            
              });           
           $('.tab1 .th th').each(function (i) {                
           var ww = $('.tab1 .th th').eq(i).width();                
           $('.tab1 .tf tr.xj').find('th').eq(i).width(ww);               
           $('.tab1 .tf tr.zj').find('th').eq(i).width(ww);            
           })        
             });        
          $('.bt #t_show').css({'width': '250px', 'height': '220px', 'overflow-y': 'auto', 'display': 'block'});        
          toggle = false;    
           }else{       
          $('.bt #t_show').css({'display': 'none'});        
           toggle = true;    
          }
         });
        );