JS代码实现鼠标经过表格时列变色

2012/10/31 20:20:11作者：佚名来源：网络

移动端

【实例名称】

JS代码实现鼠标经过表格时列变色

【实例描述】

很多例子是讲如何在鼠标移过时，改变当前行的颜色。本例学习如何在鼠标移时，改变当前的颜色。

【实例代码】

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>标题页-学无忧（www.xue51.com）</title>
</head>
<body>
<table width=500 cellspacing=0 rules=groups border
onmouseout="setColor0(event.fromElement)"
onmouseover="setColor1(event.srcElement)">
<col><col><col><col>
<tr><td>第一列</td><td>第二列</td><td>第三列</td><td>第四列</td></tr>
<tr><td>第一列</td><td>第二列</td><td>第三列</td><td>第四列</td></tr>
<tr><td>第一列</td><td>第二列</td><td>第三列</td><td>第四列</td></tr>
<tr><td>第一列</td><td>第二列</td><td>第三列</td><td>第四列</td></tr>
</table><script>
var cols=document.getElementsByTagName("table")[0].children[0].children;
   //获取所有列
function setColor0(sender)
{
 if(sender.tagName=="TD")
     cols[sender.cellIndex].style.backgroundColor="";
//鼠标移走时，取消颜色
}
function setColor1(sender)
{
 if(sender.tagName=="TD")
     cols[sender.cellIndex].style.backgroundColor="gray";
//鼠标移过来时，改变颜色
}
</script>
</body>
</html>

【运行效果】

运行效果