jquery制作表格 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();

}); 
 <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标记不能正常显示问题已解决