<table cellspacing="0">
<thead>
<tr>
<th>Item</th>
<th>Value</th>
</tr>
</thead>
<tbody>
<tr>
<td>项目Item1</td>
<td>值Value1</td>
</tr>
<tr>
<td>项目Item2</td>
<td>值Value2</td>
</tr>
<tr>
<td>项目Item3</td>
<td>值Value3</td>
</tr>
<tr>
<td>项目Item4</td>
<td>值Value4</td>
</tr>
<tr>
<td>项目Item5</td>
<td>值Value5</td>
</tr>
<tr>
<td>项目Item6</td>
<td>值Value6</td>
</tr>
</tbody>
</table>
和最初我们写的表格相比，只多了table元素的js事件绑定。接下来就是给我们的hightlightTr函数做个大手术了！这里先把最终的代码贴出来然后一起分析：
复制代码 代码如下:
<script type="text/javascript">
//<!-[CDATA[
//该函数修正IE6不能识别TR元素hover伪类的bug
function highlightTr(){
var theEvent=window.event||arguments.callee.caller.arguments[0];
var srcElement = theEvent.srcElement;
if (!srcElement)
{
srcElement = theEvent.target;
}
if(!srcElement.parentNode) return false;
var o=srcElement.parentNode;
while(o.parentNode&&o.tagName!="TR")
{
if(o.tagName=="TABLE") break;
else o=o.parentNode;
}
var regStr=https://www.jb51.net/\b\s*trHover\b/g;
if(o.className.indexOf('trHover')==-1)
o.className+=" trHover";
else
o.className=o.className.replace(regStr,"");
}
//]]>
</script>
修改后的hightlighTr的版本的思路是这样的：1、处理事件，获得触发javascript事件的页面元素。2、寻找它的父节点，直到找到tr。3、进行样式处理。
值得说的就是获得触发事件元素的部分考虑了浏览器兼容性。IE的事件模型里window对象有一个event属性，而W3C DOM标准event对象必须作为唯一参数传给事件处理函数，于是它便存在于函数的一个隐藏的参数（在参数列表第0个）里。接下来就是防止异常的一些判断之类的了。最终实现还是由修改元素样式表来完成。
至此整个兼容不同浏览器的高亮表格行的旅行结束了（好长的定语-口-）。很好玩吧~ 文中难免疏漏差错，如果对本文有建议或意见欢迎批评指正~ ^_^
您可能感兴趣的文章: