table offsetLeft取值问题
代码如下:
- HTML code
<!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=utf-8" /><title>输入框提示列表效果</title><style type="text/css"><!--body{ background:#fff; margin: 0px; padding: 0px;}.FilterSelect li{height:25px;line-height:25px;text-indent:15px;margin: 0px;padding: 0px;border-bottom:1px dashed #ccc;color:#666;cursor:pointer;}.form{ width:800px; height:800px; background-color: #F00; position: absolute; left: 80px; top: 80px;}.FilterSelect { list-style-type: none; cursor:pointer; position:absolute; border:1px solid #666; background:#fff; margin: 0px; padding: 0px; max-height: 200px; overflow: auto;}--></style><script type="text/javascript">function GetObjPosX(obj){ var x=0; x +=obj.offsetLeft; var target = obj.offsetParent; while (target) { if(!target.getElementsByTagName("table")){ x += target.offsetLeft;} target = target.offsetParent } return x;}function GetObjPosY(obj){ var y; var target = obj.offsetParent; while (target) { y += target.offsetTop; target = target.offsetParent } return y;}function show(obj){ var x=GetObjPosX(obj); var y=GetObjPosY(obj); var div=obj.parentNode; var d=div.getElementsByTagName("ul"); if(d.length>=0){ if(d[0].style.display=="none"){ d[0].style.display="block"; d[0].style.minWidth=obj.offsetWidth+"px"; d[0].style.zIndex=1000; d[0].style.left=x+"px"; d[0].style.top=(y+25)+"px"; //d[0].style.cssText="display:block;z-index:1000;left:"+x+"px;top:"+(y+25)+"px"; }else{ d[0].style.display="none"; d[0].style.zIndex=0; //d[0].style.cssText="display:none;z-index:0;" } }}function setValue(obj,value){ div=obj.parentNode.parentNode; var input=div.getElementsByTagName("input"); input[0].value=value;}</script></head><body><div class="form"> <div> Lodsafasdkjhfsadfsefcation： <input name="txt" type="text" onfocus="show(this)" onblur="show(this);"> <ul class="FilterSelect" style="display:none"> <li onmousedown="setValue(this,'中国CHIN');">中国CHINA</li> <li onmousedown="setValue(this,'美国US');">美国USA</li></ul> </div> <table width="690" border="1"> <tr> <td width="4"> </td> <td width="326"><div>jlkjlkjlsdf <input name="txt3" type="text" id="txt3" onfocus="show(this)" onblur="show(this);" size="3" /> <ul class="FilterSelect" style="display:none"> <li onmousedown="setValue(this,'中国CHIN');">中国CHINA</li> <li onmousedown="setValue(this,'美国US');">美国USA</li> </ul> </div></td> <td width="338"> </td> </tr> <tr> <td> </td> <td> </td> <td><div>aljjlkjlkjlkjlkjlkjlkdffasdf <input name="txt2" type="text" id="txt2" onfocus="show(this)" onblur="show(this);" size="3" /> <ul class="FilterSelect" style="display:none"> <li onmousedown="setValue(this,'中国CHIN');">中国CHINA</li> <li onmousedown="setValue(this,'美国US');">美国USA</li> </ul> </div></td> </tr> </table> <div> Losdfsdfcation： <input name="txt" type="text" id="txt" onfocus="show(this)" onblur="show(this);" size="3"> <ul class="FilterSelect" style="display:none"> <li onmousedown="setValue(this,'中国CHIN');">中国CHINA</li> <li onmousedown="setValue(this,'美国US');">美国USA</li></ul> </div> <div class="FilterSelect" style="left:162px">sadfasdf </div></div> <div> Location：<input name="txt" type="text" id="txt" onfocus="show(this)" onblur="show(this);" size="3"> <ul class="FilterSelect" style="display:none"> <li onmousedown="setValue(this,'中国CHIN');">中国CHINA</li> <li onmousedown="setValue(this,'美国US');">美国USA</li> <li onmousedown="setValue(this,'中国CHIN');">中国CHINA</li> <li onmousedown="setValue(this,'美1国US');">美国USA</li> <li onmousedown="setValue(this,'中3国CHIN');">中国CHINA</li> <li onmousedown="setValue(this,'美2国US');">美国USA</li></ul> </div></body></html>
offsetLeft在表格中取值不正确.哪位有解决办法.谢谢了
[解决办法]
好像只改了GetObjPosX 不过我也记不清了，主要问题是你的.form有个left: 80px;的属性
firefox3.5 chrome ie8 下通过
- HTML code
<!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=utf-8" /><title>输入框提示列表效果</title><style type="text/css"><!--body{ background:#fff; margin: 0px; padding: 0px;}.FilterSelect li{height:25px;line-height:25px;text-indent:15px;margin: 0px;padding: 0px;border-bottom:1px dashed #ccc;color:#666;cursor:pointer;}.form{ width:800px; height:800px; background-color: #F00; position: absolute; left: 80px; top: 80px;}.FilterSelect { list-style-type: none; cursor:pointer; position:absolute; border:1px solid #666; background:#fff; margin: 0px; padding: 0px; max-height: 200px; overflow: auto;}--></style><script type="text/javascript">function GetObjPosX(obj){ var x=0; x +=obj.offsetLeft; var target = obj.offsetParent; while (target) { if(!(target.className == "form")){ x += target.offsetLeft; } target = target.offsetParent } return x;}function GetObjPosY(obj){ var y; var target = obj.offsetParent; while (target) { y += target.offsetTop; target = target.offsetParent } return y;}function show(obj){ var x=GetObjPosX(obj); var y=GetObjPosY(obj); var div=obj.parentNode; var d=div.getElementsByTagName("ul"); if(d.length>=0){ if(d[0].style.display=="none"){ d[0].style.display="block"; d[0].style.minWidth=obj.offsetWidth+"px"; d[0].style.zIndex=1000; d[0].style.left=x+"px"; d[0].style.top=(y+25)+"px"; //d[0].style.cssText="display:block;z-index:1000;left:"+x+"px;top:"+(y+25)+"px"; }else{ d[0].style.display="none"; d[0].style.zIndex=0; //d[0].style.cssText="display:none;z-index:0;" } }}function setValue(obj,value){ div=obj.parentNode.parentNode; var input=div.getElementsByTagName("input"); input[0].value=value;}</script></head><body><div class="form"> <div> Lodsafasdkjhfsadfsefcation： <input name="txt" type="text" onfocus="show(this)" onblur="show(this);"> <ul class="FilterSelect" style="display:none"> <li onmousedown="setValue(this,'中国CHIN');">中国CHINA</li> <li onmousedown="setValue(this,'美国US');">美国USA</li></ul> </div> <table width="690" border="1"> <tr> <td width="4"> </td> <td width="326"><div>jlkjlkjlsdf <input name="txt3" type="text" id="txt3" onfocus="show(this)" onblur="show(this);" size="3" /> <ul class="FilterSelect" style="display:none"> <li onmousedown="setValue(this,'中国CHIN');">中国CHINA</li> <li onmousedown="setValue(this,'美国US');">美国USA</li> </ul> </div></td> <td width="338"> </td> </tr> <tr> <td> </td> <td> </td> <td><div>aljjlkjlkjlkjlkjlkjlkdffasdf <input name="txt2" type="text" id="txt2" onfocus="show(this)" onblur="show(this);" size="3" /> <ul class="FilterSelect" style="display:none"> <li onmousedown="setValue(this,'中国CHIN');">中国CHINA</li> <li onmousedown="setValue(this,'美国US');">美国USA</li> </ul> </div></td> </tr> </table> <div> Losdfsdfcation： <input name="txt" type="text" id="txt" onfocus="show(this)" onblur="show(this);" size="3"> <ul class="FilterSelect" style="display:none"> <li onmousedown="setValue(this,'中国CHIN');">中国CHINA</li> <li onmousedown="setValue(this,'美国US');">美国USA</li></ul> </div> <div class="FilterSelect" style="left:162px">sadfasdf </div></div> <div> Location：<input name="txt" type="text" id="txt" onfocus="show(this)" onblur="show(this);" size="3"> <ul class="FilterSelect" style="display:none"> <li onmousedown="setValue(this,'中国CHIN');">中国CHINA</li> <li onmousedown="setValue(this,'美国US');">美国USA</li> <li onmousedown="setValue(this,'中国CHIN');">中国CHINA</li> <li onmousedown="setValue(this,'美1国US');">美国USA</li> <li onmousedown="setValue(this,'中3国CHIN');">中国CHINA</li> <li onmousedown="setValue(this,'美2国US');">美国USA</li></ul> </div></body></html>