table offsetLeft取值问题

代码如下:<!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">&nbsp;</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">&nbsp;</td>
   </tr>
   <tr>
     <td>&nbsp;</td>
     <td>&nbsp;</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在表格中取值不正确.哪位有解决办法.谢谢了

解决方案 »

  1.   

    好像只改了GetObjPosX 不过我也记不清了，主要问题是你的.form有个left: 80px;的属性
    firefox3.5  chrome ie8 下通过<!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">&nbsp;</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">&nbsp;</td>
       </tr>
       <tr>
         <td>&nbsp;</td>
         <td>&nbsp;</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>
      

  2.   

    非常感谢你,.form的left: 80px;这个是必须要的,因为在我的实际应用中是存在的,但是你给了我思路,谢谢你