如何实现把鼠标移到一个表格上的时候表格一列的背景变色

如何实现把鼠标移到一个表格上的时候表格一列的背景变色
解决思路：
我们知道，仅变换某个单元格的背景颜色的话用就行了，而要变换一列的背景颜色就必须要取得当前单元格在行中的索引值，然后遍历表格的所有行，改变行中相应单元格的背景颜色。
具体步骤：
    方法一：利用表格的相关集合遍历设置。
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 设置或获取对象的背景颜色。