javascript 移动鼠标得到单元格所在table表中的rowIndex位置[兼容ie,firefox] 原创

从cnblogs看到的代码，作者的代码随便不兼容firefox但，有助于大家学习为什么下面的代码兼容了firefox,大家可以对比下，有助于学习，对于更多的文章可以参考我们以前发布的文章。

function mouseover(){
var ObjTd=window.event.srcElement;
var ObjTr=ObjTd.parentElement;
var y=ObjTr.rowIndex;
var x=ObjTd.cellIndex;
alert(x+" "+y);
}

     
     
     

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

下面的代码是我们修改的兼容firefox的代码

function mouseover(e){
e=window.event?window.event:e;
var ObjTd=e.srcElement?e.srcElement:e.target;
var ObjTr=ObjTd.parentNode;
var y=ObjTr.rowIndex;
var x=ObjTd.cellIndex;
alert(x+" "+y);
}

     
     
     

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

主要区别如下：
1.事件e.srcElement与e.target

经常有人问 firefox 下的 event.srcElement 怎么用，在此详细说明：
IE下,event对象有srcElement属性,但是没有target属性;Firefox下,event对象有target属性,但是没有srcElement属性.但他们的作用是相当的，即：
firefox 下的 event.target = IE 下的 event.srcElement

解决方法:使用obj(obj = event.srcElement ? event.srcElement : event.target;)来代替IE下的event.srcElement或者Firefox下的event.target.

2.parentNode与parentElement的区别
使用parentElement时在FF下无效，搜索一下才知道parentElement它是IE专用的，IE多年的霸主地位造成现在不少应用中无法与其他浏览器兼容的问题，标准化真的很重要，呵呵，一定要向Web标准看齐哦

赞 (0)

相关推荐

  • JS 实现Table相同行的单元格自动合并示例代码

    代码如下,可直接运行: 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME=&q

  • JS动态添加Table的TR，TD实现方法

    本文实例讲述了JS动态添加Table的TR,TD实现方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html>  <head> <title></title> <SCRIPT language="JavaScript"> var tempRow=0; var maxRows=0; function insertRows(){ tempRow=table1.rows.length-1; maxRows=t

  • JS使用for循环遍历Table的所有单元格内容

    JS遍历Table的所有单元格内容思路是遍历Table的所有Row,遍历Row中的每一列,获取Table中单元格的内容 function GetInfoFromTable(tableid) { var tableInfo = ""; var tableObj = document.getElementById(tableid); for (var i = 0; i < tableObj.rows.length; i++) { //遍历Table的所有Row for (var j

  • 用js实现table单元格高宽调整,兼容合并单元格(兼容IE6、7、8、FF)实例

    用js实现table单元格高宽调整,兼容合并单元格(兼容IE6、7、8、FF)实例

    先上效果图: CSS: 复制代码 代码如下: body{margin:0px;padding:0px;-moz-user-select:none;cursor:default;} .tabEditDiv{position:absolute;width:15px;height:15px;cursor:pointer;}.seltab{position:absolute;width:15px;height:15px;cursor:pointer;background:url(images/selta

  • js添加table的行和列 具体实现方法

    复制代码 代码如下: <!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>    <title></titl

  • JS与jQuery遍历Table所有单元格内容的方法

    本文实例讲述了JS与jQuery遍历Table所有单元格内容的方法.分享给大家供大家参考,具体如下: 用JS去遍历Table的所有单元格中的内容,可以用如下JS代码实现: function GetInfoFromTable(tableid) { var tableInfo = ""; var tableObj = document.getElementById(tableid); for (var i = 0; i < tableObj.rows.length; i++) { /

  • JS实现动态修改table及合并单元格的方法示例

    JS实现动态修改table及合并单元格的方法示例

    本文实例讲述了JS实现动态修改table及合并单元格的方法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-

  • JS获取Table中td值的方法

    本文实例讲述了JS获取Table中td值的方法.分享给大家供大家参考.具体如下: 1.当要获取多行中的任意TD时,采用给每个TD设置一个共同的class 复制代码 代码如下: <tr>      <td style="display: none" id="td2">002</td>      <td style="text-align: left;text-decoration:underline;" i

  • 利用js制作html table分页示例(js实现分页)

    利用js制作html table分页示例(js实现分页)

    有时候table的列数太长,不利于使用者查询,所以利用JS做了一个table的分页,以下为相关代码 一.JS代码 复制代码 代码如下: <script type="text/javascript">            var pageSize = 15;    //每页显示的记录条数             var curPage=0;        //当前页             var lastPage;        //最后页             var

  • javascript table美化鼠标滑动单元格变色

    http://www.w3.org/TR/html4/strict.dtd"> orbitz-like behavior for hovering over table cells .cssguycomments {background:#eee;border:#ddd;padding:8px;margin-bottom:40px;} .cssguycomments p {font:normal 12px/18px verdana;} table {border-collapse:coll

  • javascript实现的使用方向键控制光标在table单元格中切换

    javascript实现的使用方向键控制光标在table单元格中切换

    效果截图: html 代码: 复制代码 代码如下: <!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> <titl

  • Js获取table当前tr行的值的代码

    下面的代码主要是学习控制表格里面的一些操作,代码都是直接写在表格里面的, 大家可以改成事件绑定的. Js获取 table当前行的值 var selectedTr=null; function c1(obj){ obj.style.backgroundColor='blue'; //把点到的那一行变希望的颜色; if(selectedTr!=null) selectedTr.style.removeAttribute("backgroundColor"); if(selectedTr==

  • Js实现动态添加删除Table行示例

    Js实现动态添加删除Table行示例

    最近做项目遇到要动态添加.删除表格行的操作,实现如下 html代码 复制代码 代码如下: <table cellpadding="0" cellspacing="0" border="1" style="margin:auto; width:96%;" id="LearnInfoItem"> <tr > <td colspan="8" bgcolor=&qu

随机推荐