JQuery画细线表格

最新推荐文章于 2024-10-11 17:39:47 发布

weixin_34381666

最新推荐文章于 2024-10-11 17:39:47 发布

阅读量147

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/zixin/archive/2009/05/13/1455807.html

版权

工作需要，要个Table画细线表格，如果用表格的Border属性呢，样式是立体的，不太好看，而且如果表格嵌套的话，里面的表格的外边框会比较粗，所以自己写了个JQuery的插件，可以画带外边框的细线表格和不带外边框的细线表格

插件代码：

// JScript 文件

jQuery.fn.extend({
   // 带外边框
  border: function () {
     this .each( function (){
        $( this ).find( " tbody:first >tr>td " ).addClass( " borderTop " );

        $( this ).find( " tbody:first >tr>td " ).addClass( " borderRight " );

         var trs = $( this ).find( " tbody:first >tr " );
         for ( var i = 0 ; i < trs.size(); i ++ ){
             var tr = trs[i];
             var rightTD = $(tr).children( " td:first " );
             var rightRowspan = rightTD.attr( " rowspan " ) - 1 ;
            rightTD.addClass( " borderLeft " );
            i = i + rightRowspan;
        }

         for ( var i = 0 ; i < trs.size();i ++ ){
             var tr = trs[i];
             var bottomTD = $(tr).children( " td " );
             for ( var j = 0 ; j < bottomTD.size(); j ++ ){
                 var bottomRowspan = $(bottomTD[j]).attr( " rowspan " );
                 if (bottomRowspan + i == trs.size()){
                    $(bottomTD[j]).addClass( " borderBottom " );
                }


            }
        }
        $( this ).find( " tbody:first >tr:last>td " ).addClass( " borderBottom " );

    });



  },
   // 不带外边框
  noborder: function () {
     this .each( function (){
         var trs = $( this ).find( " tbody:first >tr " );
         for ( var i = 0 ; i < trs.size(); i ++ ){
             var tr = trs[i];
             var leftTD = $(tr).children( " td:first " );
             var leftRowspan = leftTD.attr( " rowspan " );
             for ( var j = i + 1 ; j < leftRowspan + i; j ++ )
            {
                $(trs[j]).children( " td:first " ).addClass( " borderLeft " );
            }

        }
        $( this ).find( " tbody:first>tr " ).each( function (i){
            $( this ).children( " td:not(:first) " ).addClass( " borderLeft " );
        });

         for ( var i = 0 ; i < trs.size(); i ++ ){
             var bottomTD = $(trs[i]).children( " td " );
             for ( var j = 0 ; j < bottomTD.size(); j ++ ){
                 var bottomRowspan = $(bottomTD[j]).attr( " rowspan " );
                 if (bottomRowspan + i != trs.size()){
                    $(bottomTD[j]).addClass( " borderBottom " );
                }
            }
        }

    });
  }
});

CSS：

.borderTop {
    border-top : solid 1px #000000 ;
}
.borderBottom {
    border-bottom : solid 1px #000000 ;
}
.borderLeft {
    border-left : solid 1px #000000 ;
}
.borderRight {
    border-right : solid 1px #000000 ;
}

调用：

$( function () {
$( " table.border " ).border();
$( " table.noborder " ).noborder();
});

< table class ="border" cellpadding ="0" cellspacing ="0" >
             < tr >
                 < td style ="width: 100px; height: 21px;" >
                       </ td >
                 < td style ="width: 100px; height: 21px;" >
                       </ td >
             </ tr >
             < tr >
                 < td style ="width: 100px; height: 21px;" >
                       </ td >
                 < td style ="width: 100px; height: 21px;" >
                       </ td >
             </ tr >

         </ table >

         < table class ="noborder" cellpadding ="0" cellspacing ="0" >
             < tr >
                 < td style ="width: 100px; height: 21px;" >
                       </ td >
                 < td style ="width: 100px; height: 21px;" >
                       </ td >
             </ tr >
             < tr >
                 < td style ="width: 100px; height: 21px;" >
                       </ td >
                 < td style ="width: 100px; height: 21px;" >
                       </ td >
             </ tr >

         </ table >

已知的问题：

如果表格中的td用到rowspan标记，会有问题，目前的替代做法是，用嵌套表格来实现（以解决）

如果表格中有tr或者td用display: none;隐藏了的话显示会不正确

ps:

2009-5-14:rowspan标记不能正常显示问题已解决

转载于:https://www.cnblogs.com/zixin/archive/2009/05/13/1455807.html