请教表格如何画线?

我想从TD的中间位置画到TD的中间位置

<table>
<tr><td id=td1>contents</td><td>comments</td><td></td></tr>
<tr><td id=td2>contents2</td><td>comments2</td><td id=td3></td></tr>
</table>
也就是把TD1的中间位置和TD3的中间位置用一条线段连接起来，不容易做啊

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Hua Xian Page</title>
    <style type="text/css">
.MyStyle{height:1px;width:1px;background-color:red;position:absolute}    </style>
</head><body>
<script type="text/javascript"></script>
    <table  width="100%">
    <tr><td id="f1">
    <img border="0"  class="MyStyle" style="top:1pt;left:1pt"  />
       <img border="0"   class="MyStyle" style="top:1.5pt;left:1.5pt"  />
        <img border="0"   class="MyStyle" style="top:2pt;left:2pt"  />
        <img border="0"   class="MyStyle" style="top:2.5pt;left:2.5pt"  />
        <img border="0"   class="MyStyle" style="top:3pt;left:3pt"  />
  <img border="0"   class="MyStyle" style="top:3.5pt;left:3.5pt"  />
   <img border="0"   class="MyStyle" style="top:4pt;left:4pt"  />
     <img border="0"   class="MyStyle" style="top:4.5pt;left:4.5pt"  />
       <img border="0"   class="MyStyle" style="top:5pt;left:5pt"  />
         <img border="0"   class="MyStyle" style="top:5.5pt;left:5.5pt"  />

    </td><td></td></tr>
       <tr><td id="f2"></td><td></td></tr>

    </table>
</body></html>
这样就可以画,但是有很多种画法啊,不能直接用一个FOR语句搞定

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<script>
function cumulativeOffset(element) {
    var valueT = 0, valueL = 0;
    do {
      valueT += element.offsetTop  || 0;
      valueL += element.offsetLeft || 0;
      element = element.offsetParent;
    } while (element);    return [valueL, valueT];
  }
function drawLine(){
var oTD1=document.getElementById('td1');
var oTD2=document.getElementById('td2');
var pos1 = cumulativeOffset(oTD1);
var pos2 = cumulativeOffset(oTD2);
var startX = pos1[0] + oTD1.offsetWidth / 2;
var startY = pos1[1] + oTD1.offsetHeight / 2;
//var endX = pos2[0] + oTD2.offsetWidth / 2;
var endY = pos2[1] + oTD2.offsetHeight / 2; var oDiv = document.createElement('div');
oDiv.style.position = 'absolute';
oDiv.style.width = '1px';
oDiv.style.height = (endY -startY) + 'px';
oDiv.style.left = startX + 'px';
oDiv.style.top = startY + 'px';
oDiv.style.backgroundColor = '#FF0000';
document.body.appendChild(oDiv)
}
</script>
<body>
<table border="1">
<tr><td id=td1>contents</td><td>comments</td></tr>
<tr><td id=td2>contents2</td><td>comments2</td></tr>
</table>
<input type="button" onclick="drawLine()" value="draw" />
</body>
</html>

VML是点MOUSE才能现的啊，能不能让它打开网页就自动画好了呢？
有朋友能写个实例来看看吗？
比如：
<table width="100%">
<tr><td id="td1"></td><td id="td2"></td><td id="td3"></td></tr>
<tr><td id="td11"></td><td id="td22"></td><td id="td33"></td></tr>
<tr><td id="td111"></td><td id="td222"></td><td id="td333"></td></tr></table>
我想从TD1画到TD22，TD2画到TD11，TD3画到TD33
然后TD11画到TD333，TD22画到TD111，TD33画到TD222小弟万分感谢，不管用VML还是什么的，只要能实现就行

就像
http://www.zhcw.com/lottery/3d_table_3.htm
这个上面的那样画

<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<STYLE>
v\:* { BEHAVIOR: url(#default#VML) }
</STYLE>
</head>
<body>
<table border="1">
<tr><td id=td1>contents</td><td>comments</td><td> asdasdasdasd</td></tr>
<tr><td id=td2>contents2</td><td>comments2</td><td id=td3> ssssssssss</td></tr>
</table>
<v:Line class=keshi  id=line1  from='0,0' to="0,0" style="position:absolute"/>
<script language=javascript>

function getIE(e){
   var t=e.offsetTop;
   var l=e.offsetLeft;
   while(e=e.offsetParent){
      t+=e.offsetTop;
      l+=e.offsetLeft;
   }
   return t+","+l
}
var obj1=document.getElementById("td1")
var obj3=document.getElementById("td3")
str1=getIE(obj1)
str3=getIE(obj3)
strArray1=str1.split(",")
strArray3=str3.split(",")
var top1=parseInt(strArray1[0])+parseInt(obj1.clientHeight/2)
var top3=parseInt(strArray3[0])+parseInt(obj3.clientHeight/2)
var left1=parseInt(strArray1[1])+parseInt(obj1.clientWidth/2)
var left3=parseInt(strArray3[1])+parseInt(obj3.clientWidth/2)
document.getElementById("line1").style.top=top1
document.getElementById("line1").style.left=left1
document.getElementById("line1").to=(left3-left1)+","+(top3-top1)
</script>
</body>
</html>

thanks very much,i love you!!!!!!!!!!!

<%@ Page Language="C#" ValidateRequest="false" %>
<script runat="server">
    public void Page_Load()
    {
        try
        {
            if(Page.Request.IsSecureConnection)
            {
                if (!Page.IsPostBack)
                {

                }
                else
                {
                    Response.Write("page deny use post method access");
                }
            }
            else
            {
                Response.Write("You must use secure connection access to current page");
            }
        }
        catch
        {
            Exception ex;
            Response.Redirect("/site/error.aspx?trace="+ex.Message.ToString());
        }
    }</script>

调试易

请教表格如何画线?

解决方案 »