关于用线条连接table单元格的问题

dickensevilgirl 2012-01-02 09:47:03

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="fast.aspx.cs" Inherits="fast" %>

<!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 runat="server">
<title>表格最快方法</title>
<script language="javascript" type="text/javascript">
function createTable()//创建表格
{
var i;
var j;
var k=1;
var data = new Array();
data.push('<table id="table1" border=1 onclick="getlPos();"><tbody>');
for (i = 1; i < 16; i++) {
data.push('<tr>');
for (j = 1; j < 25; j++) {
// data.push('<td width="40px" height="30px">' + i + ',' + j + '</td>');
data.push('<td width="40px" height="30px">' + '</td>');
}
data.push('</tr>');
}
data.push('</tbody><table>');
document.getElementById('table').innerHTML = data.join('');
}
function drawDot(x,y) //画点函数
{
document.write("<div style='height:1px;position:absolute;left:"+x+"px;top:"+y+"px;width:1px;background:#FF00FF;overflow:hidden'></div>")
}
function drawLine(x1,y1,x2,y2)//画线
{
var i;0
var r=Math.floor(Math.sqrt((x2-x1)*(x2-x1)+(y2-y1)*(y2-y1)));
var theta=Math.atan((y2-y1)/(x2-x1));
if(((y2-y1)<0&&(x2-x1)>=0)||((y2-y1)>0&&(x2-x1)<0))
theta=Math.PI+theta;
var dx=Math.cos(theta);
var dy=Math.sin(theta);
{
if(((y2-y1)>=0&&(x2-x1)>0)||((y2-y1)>0&&(x2-x1)<=0))
{
for(i=0;i<r;i++)
drawDot(x1+i*dx,y1+i*dy);
}
else
for(i=0;i<r;i++)
drawDot(x1-i*dx,y1-i*dy);
}
}
//获得table左上角定点的坐标
function getelementLeft(e){
var offset = e.offsetLeft;
if(e.offsetParent != null) offset += getelementLeft(e.offsetParent);
return offset;
}

function getelementTop(e){
var offset=e.offsetTop;
if(e.offsetParent != null) offset += getelementTop(e.offsetParent);
return offset;
}

function getelementPos(e){
return {left:getelementLeft(e)+document.body.clientLeft, top:getelementTop(e)+document.body.clientTop};
}

function getlPos()
{
var _table=document.getElementById("table1");
var pos = getelementPos(_table);
alert("left:"+pos.left+"|top:"+pos.top);
}
</script>
</head>
<body >
<div id="table">
<script language="javascript" type="text/javascript">
createTable();
drawLine(49,39,208,158);
</script>
</div>
</body>
</html>
单元格的宽度是40，高度是30，table左上角定点坐标是（8,8），border=1 ，当drawLine(49,39,208,158);时应该起点是第一个单元格的右下角啊，可是现在起点在第一个单元格内部，为什么呢？

...全文