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

来源：互联网发布：淘宝id怎么查编辑：程序博客网时间：2024/06/06 20:21

</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标签设置iddiv1.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");的调用方式就可以了

0 0