如何實現(xiàn)把鼠標移到一個表格上的時候表格一列的背景變色

luckfly

如何實現(xiàn)把鼠標移到一個表格上的時候表格一列的背景變色

解決思路：
我們知道，僅變換某個單元格的背景顏色的話用就行了，而要變換一列的背景顏色就必須要取得當前單元格在行中的索引值，然后遍歷表格的所有行，改變行中相應單元格的背景顏色。

具體步驟：
    方法一：利用表格的相關集合遍歷設置。
1.插入表格代碼

   
    demo
    demo
    demo
   
   
    demo
    demo
    demo
   
   
    demo
    demo
    demo
   

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

function cells_color(){
var oColor,td=event.srcElement
if(td.tagName!="TD")  
   return ;
if(event.type=="mouseover"  
   oColor="#dedede"
else oColor="#ffffff"
tb=td.parentElement.parentElement  
for(var i=0;i
3.在表格中加入鼠標事件并觸發(fā)相應函數(shù)后的完全代碼如下：

function cells_color(){
var oColor,td=event.srcElement
if(td.tagName!="TD") //如果事件不是發(fā)生在單元格上，退出函數(shù)
   return
if(event.type=="mouseover") //判斷事件類型，決定單元格改變的顏色
   oColor="#dedede"
else oColor="#ffffff"
tb=td.parentElement.parentElement  //單元格的上兩級對象為表格
//遍歷表格的所有行，設置相應單元格的背景顏色
for(var i=0;i

   
    demo
    demo
    demo
   
   
    demo
    demo
    demo
   
   
    demo
    demo
    demo
   

技巧：可以多加一個循環(huán)，改變鼠標所在的行的所有單元格背景，腳本修改如下：

function cells_color(){
var oColor,td=event.srcElement
if(td.tagName!="TD")
   return ;
if(event.type=="mouseover")
    oColor="#dedede"
else oColor="#ffffff"
tr=td.parentElement
tb=tr.parentElement
for(var i=0;i
方法二：利用表格的COL標簽將表格分組實現(xiàn)。
完整代碼：

function cells_color(){
var oColor,td=event.srcElement
if(td.tagName!="TD") //如果事件不是發(fā)生在單元格上，退出函數(shù)
   return
if(event.type=="mouseover") //判斷事件類型，決定單元格改變的顏色
   oColor="#dedede"
else oColor="#ffffff"
//依次捕獲的對象為 td.tr.tbody.table.colgroup單元格的上兩級對象為表格
cols=td.parentElement.parentElement.parentElement.children[0]
    cols.children[td.cellIndex].style.backgroundColor=oColor
}



   
    demo
    demo
    demo
   
   
    demo
    demo
    demo
   
   
    demo
    demo
    demo
   

    注意：雖然沒有顯式定義TBODY標簽，但TBODY將為全部表格自動定義。
特別提示
因為方法二比方法一少了一個遍歷，所以效果更高。代碼運行后的效果如圖 1.2.37所示。

圖 1.2.37 鼠標移上單元格是單元格所在列的背景顏色全部改變
特別說明
本例涉及到的知識點比較多，逐一介紹如下：
col 指定基于列的表格默認屬性。
colgroup 指定表格中一列或一組列的默認屬性。
parentElement 獲取對象層次中的父對象。
children 獲取作為對象直接后代的 DHTML 對象的集合。
backgroundColor 設置或獲取對象的背景顏色。

本文來自ChinaUnix博客，如果查看原文請點：http://blog.chinaunix.net/u/15511/showart_97381.html