当鼠标移到单元格(tr、td)背景变色 多种解决方案

第一种：

td单元格变色，只用简单的js代码即可实现。

很简洁的代码，点击即可运行该代码


 
 
 
 
 
 

Menu Item1
Menu Item2

第二种：

tr列变色。把鼠标移到一个表格上的时候表格一列的背景变色，可用于论坛列表、新闻发布系统、后台等等。提供两种解决方案。

解决思路：
我们知道，仅变换某个单元格的背景颜色的话用就行了，而要变换一列的背景颜色就必须要取得当前单元格在行中的索引值，然后遍历表格的所有行，改变行中相应单元格的背景颜色。
具体步骤：

    方法一：利用表格的相关集合遍历设置。
1.插入表格代码

 
   
   
   
 
 
   
   
   
 
 
   
   
   
 

demo	demo	demo
demo	demo	demo
demo	demo	demo

2.加入控制背景色功能的JavaScript脚本。

3.在表格中加入鼠标事件并触发相应函数后的完全代码如下：

 
   
   
   
 
 
   
   
   
 
 
   
   
   
 

demo	demo	demo
demo	demo	demo
demo	demo	demo

技巧：可以多加一个循环，改变鼠标所在的行的所有单元格背景，脚本修改如下：

方法二：利用表格的COL标签将表格分组实现。
完整代码：

 
   
   
   
 
 
   
   
   
 
 
   
   
   
 

demo	demo	demo
demo	demo	demo
demo	demo	demo

    注意：虽然没有显式定义TBODY标签，但TBODY将为全部表格自动定义。
特别提示
因为方法二比方法一少了一个遍历，所以效果更高。代码运行后的效果如图 1.2.37所示。

图 1.2.37 鼠标移上单元格是单元格所在列的背景颜色全部改变
特别说明

本例涉及到的知识点比较多，逐一介绍如下：
col 指定基于列的表格默认属性。
colgroup 指定表格中一列或一组列的默认属性。
parentElement 获取对象层次中的父对象。
children 获取作为对象直接后代的 DHTML 对象的集合。
backgroundColor 设置或获取对象的背景颜色。