js鼠标跟随移动显示表格上某一行的信息(包括表格外的信息)

</pre>部分html代码:<p></p><p></p><pre name="code" class="html"><s:iterator value="#listall" var="list" status="status">
			<tr name="tr">
			<td id="linenum" style="display: none;"><s:property value="#status.index+1"/></td>
				<td>${list.trader.company.companyName }</td>

js代码:

<script type="text/javascript">
		var trnodets = document.getElementsByName("tr");
		for (var i = 0; i < trnodets.length; i++) {
			var trnode = trnodets[i];
			var line=i+1;
			trnode.onmousemove = function(ev) {
				this.style.backgroundColor = "#afaeae";
				var div3=document.getElementById("linshi");
				var linenum=this.getElementsByTagName("td");//获取所有子td标签
				//alert(linenum);
				ev= ev || window.event;
				var mousePos = mouseCoords(ev);
				var div1 = document.createElement("td");//创建一个td标签
				div1.id="linshi";
				div1.style.width="300px";
				div1.style.height="20px";
				div1.style.backgroundColor = "#afaeae";
				div1.style.border="thick solid #0000FF";
				div1.innerHTML="第"+linenum[0].innerHTML+"行;x:"+mousePos.x+";y:"+mousePos.y;
				div1.style.position="absolute";//绝对布局
				div1.style.left=mousePos.x+"px";//鼠标横位置
				div1.style.top=mousePos.y+25+"px";
				if (div3 == null){
					this.appendChild(div1);//添加
				}else {
					div3.parentNode.replaceChild(div1,div3);//替换
				}
			} 
			trnode.onmouseout = function() {
				this.style.backgroundColor = "";
				var div3=document.getElementById("linshi");
				if (div3 != null)
				div3.parentNode.removeChild(div3);
			}
			
		}

		function mouseCoords(ev)
		{
		 if(ev.pageX || ev.pageY){
		   return {x:ev.pageX, y:ev.pageY};
		 }
		 return {
		     x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
		     y:ev.clientY + document.body.scrollTop     - document.body.clientTop
		 };
		}
	</script>

------------------------------2015-10-20添加----------------------------

为了更方便的对任意一个表格的操作,可以为指定id的table进行设置

之前mouseCoords的函数得到的xy坐标在ie和谷歌的浏览器上存在一定的兼容性对,显示的数值并不一样,百度一下找到了替代

代码如下:

function showDialog(table_id){
		var data_table = document.getElementById(table_id);
		if (data_table == null) return;
		var trnodets = data_table.getElementsByTagName("tr");
		for (var i = 1; i < trnodets.length; i++) {
			var trnode = trnodets[i];
			trnode.onmousemove = function(ev) {
				this.style.backgroundColor = "#e0e0e0";
				var div3=document.getElementById("linshi");
				var linenum=this.getElementsByTagName("td");//获取所有子td标签
				//alert(linenum);
				ev= ev || window.event;
				var mousePos = mouseCoords(ev);
				var div1 = document.createElement("div");//创建一个td标签
				div1.id="linshi";//为创建的td标签设置id
				div1.style.width="250px";
				div1.style.height="100px";
				div1.style.backgroundColor = "#fff";
				div1.style.border="1px solid #75878a";
				div1.innerHTML="报价编号:"+linenum[0].innerHTML+"<br />报价机构:"+linenum[1].innerHTML+"<br />交易员:"+linenum[2].innerHTML+"<br />联系方式:"+linenum[3].innerHTML;
				div1.style.position="absolute";//绝对布局
				//div1.style.left=mousePos.x+"px";//鼠标横位置
				//div1.style.top=mousePos.y+25+"px";
				div1.style.left=mousePos.x+"px";//鼠标横位置
				div1.style.top=mousePos.y+25+"px";
				var body1=document.getElementsByTagName("body");
				if (div3 == null){
					body1[0].appendChild(div1);//添加
				}else {
					div3.parentNode.replaceChild(div1,div3);//替换
				}
			} 
			trnode.onmouseout = function() {
				this.style.backgroundColor = "";
				var div3=document.getElementById("linshi");
				if (div3 != null)
				div3.parentNode.removeChild(div3);
			}
			
		}
	
		function mouseCoords(event)
		{
		 /* if(ev.pageX || ev.pageY){
		   return {x:ev.pageX, y:ev.pageY};
		 }
		 return {
		     x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
		     y:ev.clientY + document.body.scrollTop     - document.body.clientTop
		 }; */
			var e = event || window.event;
	        var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
	        var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
	        var x = e.pageX || e.clientX + scrollX;
	        var y = e.pageY || e.clientY + scrollY;
	        //alert('x: ' + x + '\ny: ' + y);
	        return { 'x': x, 'y': y };
		}
	}

只需要类似showDialog("data_table");、showDialog("tuijian_table");的调用方式就可以了