关于获取坐标的问题

[nik_Amis]

<table>
<tr>
<td>
<input>
</td>
</tr>
</table>

我的目的是在click <input>这个元素的时候
弹出一个div，div的要放置在input下面
如何计算这个div的坐标？
posLeft,pixelLeft,offsetLeft,还是什么？
offsetLeft获得的是相对于table的距离，这个不能用，其它的都得不到数据

[nik_Amis]

up

[fason]

看你是否定义过td的style的background-color有的话就改成这样
e.style.backgroundColor="blue";

[nik_Amis]

多谢！可以了

不过为什么要写blue，我要用rgb()的颜色，怎么写？
还有个问题，mouseIN的时候，如何能记住这个单元格原来的背景色

function TDMouseIn()
{
var e = window.event.srcElement;
e.style.backgroundColor="blue";
}

function TDMouseOut()
{
var e = window.event.srcElement;
e.style.backgroundColor="";
}

[fason]

e.style.backgroundColor="rgb(0,255,0)";

[fason]

<table>
<tr>
<td>
<input onclick="showDiv(this)">
</td>
</tr>
</table>
<div id=demo style="position:absolute;z-index:1000;visibility:hidden">hehe</div>
<script language="JavaScript">
<!--
function showDiv(o){
var e=o
var l=e.offsetLeft;
var t=e.offsetTop;
while(e=e.offsetParent){
l+=e.offsetLeft;
t+=e.offsetTop;
}
with(demo.style){
left=l
top=t+o.offsetHeight
width=o.offsetWidth
height=100;
border="1px outset"
visibility=visibility==''?'hidden':''
}
}
//-->
</script>

[nik_Amis]

y!it does work!
thank you very much!

[全息宇宙]

单击事件发生后鼠标的座标:
document.body.scrollLeft + window.event.x //x座标
document.body.scrollTop + window.event.y //y座标

[nik_Amis]

<script language="javascript">
var date = new Date();
var activeDate = new Date();

var tbl = window.document.createElement("<TABLE style=\"background:white;border:1px solid

black;width:100%;height:100%;font:9pt arial;\" cellspacing=0 cellpadding=0 >");
var tblhd = window.document.createElement("THEAD");
var tblbd = window.document.createElement("TBODY");

var anchorPriorYear = window.document.createElement("A");
anchorPriorYear.style.fontFamily = "webdings";
anchorPriorYear.style.color="white";
anchorPriorYear.style.cursor = "hand";
anchorPriorYear.innerText = "7";
anchorPriorYear.title = "上一年";
var anchorPriorMonth = window.document.createElement("A");
anchorPriorMonth.style.fontFamily = "webdings";
anchorPriorMonth.style.color="white";
anchorPriorMonth.style.cursor = "hand";
anchorPriorMonth.innerText = "3";
anchorPriorMonth.title = "上一月";
var anchorNextMonth = window.document.createElement("A");
anchorNextMonth.style.fontFamily = "webdings";
anchorNextMonth.style.cursor = "hand";
anchorNextMonth.style.color="white";
anchorNextMonth.innerText = "4";
anchorNextMonth.title = "下一月";
var anchorNextYear = window.document.createElement("A");
anchorNextYear.style.fontFamily = "webdings";
anchorNextYear.style.cursor = "hand";
anchorNextYear.style.color= "white";
anchorNextYear.innerText = "8";
anchorNextYear.title = "下一年";
var anchorClose = window.document.createElement("A");
anchorClose.style.fontFamily = "webdings";
anchorClose.style.cursor = "hand";
anchorClose.style.color= "white";
anchorClose.innerText = "r";
anchorClose.title = "关闭";

var ynm = window.document.createElement("FONT");
ynm.style.width = "60%";
ynm.style.fontWeight = "bold";

var cpt = window.document.createElement("CAPTION");
tbl.appendChild(cpt);
tbl.appendChild(tblhd);
tbl.appendChild(tblbd);

var fillInput;
var calshow=false;

window.onload=function()
{
initcal();
}

function initcal()
{
inithead();
initbody();
calendar.appendChild(tbl);
fillCalendar(date);
tblbd.attachEvent("onclick",selectDate);
tblbd.attachEvent("onkeydown",moveDate);
tblbd.attachEvent("onmouseover",TDMouseIn);
tblbd.attachEvent("onmouseout",TDMouseOut);
anchorPriorYear.attachEvent("onclick",goPriorYear);
anchorPriorMonth.attachEvent("onclick",goPriorMonth);
anchorNextMonth.attachEvent("onclick",goNextMonth);
anchorNextYear.attachEvent("onclick",goNextYear);
anchorClose.attachEvent("onclick",closeCalendar);
calendar.stopBubble = true;

}

function TDMouseIn()
{
var e = window.event.srcElement;
e.bgcolor="#ddddff";
}

function TDMouseOut()
{
var e = window.event.srcElement;
e.bgcolor="#ffffff";
}

function inithead()
{
cpt.style.backgroundColor = "#003399";
cpt.style.color = "white";
cpt.style.textAlign = "center";
cpt.appendChild(anchorPriorYear);
cpt.appendChild(anchorPriorMonth);
cpt.appendChild(ynm);
cpt.appendChild(anchorNextMonth);
cpt.appendChild(anchorNextYear);
cpt.appendChild(anchorClose);
var row = tblhd.insertRow();
row.align = "center";
var weekStr = new Array("日","一","二","三","四","五","六");
var weekstrs=weekStr.length;
for (var i=0;i<weekstrs;i++)
{
var cell = row.insertCell();
cell.innerText = weekStr[i];
cell.style.borderBottom = "solid 1px";
cell.style.cursor = "default";
cell.align = "center";
if(i==0||i==6)cell.style.color="red";
}
}

function initbody()
{
for (var i=0;i<6;i++)
{
var row = tblbd.insertRow();
for (var j=0;j<7;j++)
{
var cell = row.insertCell();
cell.innerHTML = " ";
cell.style.cursor = "default";
cell.align = "center";
}
}
}

function fillCalendar(adate)
{
ynm.innerText = adate.getFullYear() + "年" + (adate.getMonth() + 1) + "月";
var tempdate = new Date();
tempdate.setFullYear(adate.getFullYear(),adate.getMonth(),1);
var first = true;
var rows=tblbd.rows.length;
var cells;
for (var i=0;i<rows;i++)
{
cells=tblbd.rows(i).cells.length;
for (var j=0;j<cells;j++)
{
var cell = tblbd.rows(i).cells(j);
cell.innerHTML = " ";
cell.bgcolor = "#ffffff";
cell.title = "";
if(j==0||j==6) cell.style.color="red";
else cell.style.color="black";
cell.style.backgroundColor = "";
if (tempdate.getDay() == j)
{
if (!first) continue;
cell.innerText = tempdate.getDate();
var today=new Date();
if (tempdate.getDate() == activeDate.getDate())
{
cell.setAttribute("active",true);
hightLightDate(cell);
}
tempdate.setFullYear(tempdate.getFullYear(),tempdate.getMonth(),tempdate.getDate()+1);
first = tempdate.getDate() > 1;
}
}
}
}

function hightLightDate(object)
{
var tds = tblbd.all.tags("TD");
var tdsl=tds.length;
for (var i=0;i<tdsl;i++)
{
if (tds(i) != object)
{
tds(i).style.backgroundColor = tds(i).bgcolor;
tds(i).style.color = tds(i).style.color
}
else
{
tds(i).style.backgroundColor = "red";
tds(i).style.color = "white";
}
}
}

function selectDate()
{
var i = parseInt(window.event.srcElement.innerText);
if ((!isNaN(i)) && (i<3000))
{
activeDate.setFullYear(date.getFullYear(),date.getMonth(),i);
fillCalendar(activeDate);
}
fillInput.value=activeDate.getFullYear()+'-'+(activeDate.getMonth()+1)+"-"+activeDate.getDate();//原先+i好像会出错

,+activeDate.getDate()应该不会出错
}


function moveDate()
{
var k = window.event.keyCode;
switch(k)
{
case 37: activeDate.setFullYear(activeDate.getFullYear(),activeDate.getMonth(),activeDate.getDate()-1);
break;
case 38: activeDate.setFullYear(activeDate.getFullYear(),activeDate.getMonth(),activeDate.getDate()-7);
break;
case 39: activeDate.setFullYear(activeDate.getFullYear(),activeDate.getMonth(),activeDate.getDate()+1);
break;
case 40: activeDate.setFullYear(activeDate.getFullYear(),activeDate.getMonth(),activeDate.getDate()+7);
break;
}
date.setFullYear(activeDate.getFullYear(),activeDate.getMonth(),activeDate.getDate());
fillCalendar(date);
fillInput.value=activeDate.getFullYear()+'-'+(activeDate.getMonth()+1)+"-"+activeDate.getDate();
}

function goNextMonth()
{
date.setMonth(date.getMonth()+1,1);
setActiveDate();
fillCalendar(date);
}

function goNextYear()
{
date.setFullYear(date.getFullYear()+1,date.getMonth(),1);
setActiveDate();
fillCalendar(date);
}

function goPriorYear()
{
date.setFullYear(date.getFullYear()-1,date.getMonth(),1);
setActiveDate();
fillCalendar(date);
}

function goPriorMonth()
{
date.setMonth(date.getMonth()-1,1);
setActiveDate();
fillCalendar(date);
}

function setActiveDate()
{
var i = activeDate.getDate();
activeDate.setFullYear(date.getFullYear(),date.getMonth(),i);
while ((date.getMonth() != activeDate.getMonth()) || (date.getFullYear() != activeDate.getFullYear()))
{
activeDate.setFullYear(date.getFullYear(),date.getMonth(),i--);
}
fillCalendar(date);
}

function showCalendar(e)
{
var l=e.offsetLeft;
var t=e.offsetTop+e.offsetHeight;
var oe=e;
while(e=e.offsetParent)
{
l+=e.offsetLeft;
t+=e.offsetTop;
}
calendar.style.top=t;
calendar.style.left=l;
calshow=true;
fillInput=oe;
calendar.style.display="block";
}

function hiddenCal()
{
if(!calshow)calendar.style.display="none";
}

function closeCalendar()
{
calshow=false;
calendar.style.display="none";
}

</script>

<input type="text" name="txt1" onclick="showCalendar(this);this.blur();" class="text-face" onmouseout="calshow=false"/>

啊信兄 再帮俺看个问题
这是以前俺收藏的一个日历程序
但是按想改进它

就是鼠标再格子上移动的时候，经过的格子背景变色
该改哪里？谢谢

在加100分，以示感谢

[fason]

改这两个
function TDMouseIn()
{
var e = window.event.srcElement;
e.bgColor="#ddddff";
}

function TDMouseOut()
{
var e = window.event.srcElement;
e.bgColor="#ffffff";
}

[fason]

还有一行也是同样的错误
cell.bgColor = "#ffffff";

[nik_Amis]

function TDMouseOut()
{
var e = window.event.srcElement;
e.bgColor="blue";
}
我这么改好像没有用啊
怎么改？偶对这块不太熟，望指教，谢谢！