table offsetLeft取值有关问题-JavaSript-爱易网页

table offsetLeft取值有关问题

日期：2014-05-16　浏览次数：20356 次

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">&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=&quo

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

table offsetLeft取值有关问题

相关资料更多>

推荐阅读更多>