JQuery画细线表格

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

已知的问题：

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

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

ps:

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

posted on 2009-05-13 12:50 滋心阅读(1183) 评论(0) 编辑收藏举报