table中做連接線

首先先看一下效果，這是在在table中製作的連接線的樣子（圖爲11選5號碼走勢圖中的一部分）。

首先先創建一個js文件。

該JS中是利用DrawLine來做連接線，當然需要在HTML中td標籤中的的id來標記，需要做連接線的位置。

var FFLine = function(lColor,lWidth){
    this.color = lColor;
    this.width = lWidth;
}
FFLine.prototype = {
    DLine:function(CurrnetTd,PrevTd,tw,plw){
        var tid = $("#"+CurrnetTd);
        var fid = $("#"+PrevTd);
	    var f_width = fid.outerWidth();
	    var f_height = fid.outerHeight();
	    var f_offset = fid.offset();
	    var f_top = f_offset.top;
	    var f_left = f_offset.left;
	    var t_offset = tid.offset();
	    var t_top = t_offset.top;
	    var t_left = t_offset.left;
	    var cvs_left = Math.min(f_left,t_left);
	    var cvs_top = Math.min(f_top,t_top);
	    var cvs = document.createElement("canvas");
	    cvs.width = Math.abs(f_left - t_left) < this.width ? this.width : Math.abs(f_left - t_left);
	    cvs.height = Math.abs(f_top - t_top);
	    cvs.style.top = cvs_top + parseInt(f_height / 2) + "px";
	    cvs.style.left = cvs_left + parseInt(f_width / 2) + "px";
	    cvs.style.position = "absolute";
	    var cxt = cvs.getContext("2d");
	    cxt.save();
	    cxt.strokeStyle = this.color;
	    cxt.lineWidth = this.width;
	    cxt.beginPath();
	    cxt.moveTo(f_left - cvs_left,f_top - cvs_top);
	    cxt.lineTo(t_left - cvs_left,t_top - cvs_top);
	    cxt.closePath();
	    cxt.stroke();
	    cxt.restore();
	    $("body").append(cvs);
    }
}

var IELine = function(lColor,lWidth){
    this.color = lColor;
    this.width = lWidth;
}
IELine.prototype = {
    DLine:function(CurrnetTd,PrevTd,tw,plw){
        var tid=$("#"+CurrnetTd);
        var fid=$("#"+PrevTd);
        var a_array = PrevTd.split("_");
        var b_array = CurrnetTd.split("_");
	    var coordinate = (parseInt(b_array[1]) - parseInt(a_array[1])) * (tw+1) - plw;
	    var newLine = document.createElement("<vle:line></vle:line>");
	    newLine.from = -plw + ",7";
	    newLine.to = coordinate + ",32";
	    newLine.StrokeColor = this.color;
	    newLine.StrokeWeight = this.width;
	    newLine.style.cssText = "position:absolute;";
	    fid.append(newLine);
    }
}

var DrawLine = function(coords,tw,plw){//用於劃線
    var crd = coords.split("|");
    var tpwidth = tw.split("|");
    var tppl = plw.split("|");
    var len = crd.length;
    for(var i=0;i<len;i++)
    {
        var tp = crd[i];
        var lwidth = parseInt(tpwidth[i]);
        var lpw = parseInt(tppl[i]);
        if(len>1)
        {
            if(i==len-1)
            {DrawEverLine(tp,lwidth,lpw);}
            else
            { window.setTimeout("DrawEverLine('"+tp+"',"+lwidth+","+lpw+")",i*40);}
        }
        else
        {DrawEverLine(tp,lwidth,lpw);}
    }
}

var DrawEverLine=function(lids,lwth,lpw){
    var line;
    var wth = lwth;
    var pw = lpw;
    if($.browser.msie)
    {
        var version = parseFloat($.browser.version);
        if(version>=9)
        {line = new FFLine("#999999",1);}
        else
        {line = new IELine("#999999",1);}
    }
    else
    {line = new FFLine("#999999",1);}
    var tp = lids.split(",");
    for(var j=tp.length-1;j>0;j--)
    {
        line.DLine(tp[j],tp[j-1],wth,pw);
    }
}

html <td>標記處略去，只需要將id標記爲唯一的即可。

HTML中加入引入JS文件
<script type="text/javascript" src="<%=contextPath%>/js/Line.js"></script>

$(document).ready(function(){
    DrawLine("<%=lineFirstId %>","2","2");//第一位連接線
    DrawLine("<%=lineSecondId %>","2","2");//第二位連接線
    DrawLine("<%=lineThirdId %>","2","2");//第三位連接線
    //DrawLine("<%=lineSpanId %>","2","2");//跨度連接線
});