JQuery画细线表格

最新推荐文章于 2024-02-05 11:40:31 发布

weixin_34381666

最新推荐文章于 2024-02-05 11:40:31 发布

阅读量172

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

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

为了解决工作中的需求，本文介绍了一个自定义的JQuery插件，该插件能够绘制带有或不带有外边框的细线表格。通过使用这个插件，可以避免表格边框的默认样式问题，并且支持表格嵌套。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

工作需要，要个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();
});