table offsetLeft取值问题

hljt512 2011-11-12 05:40:56

代码如下:

<!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在表格中取值不正确.哪位有解决办法.谢谢了

...全文

165 2 打赏收藏转发到动态举报

写回复

用AI写文章

2 条回复

切换为时间正序

请发表友善的回复…

发表回复

hljt512 2011-11-12

打赏
举报

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

p2227 2011-11-12

打赏
举报

好像只改了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"> </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>