當鼠標移到單元格(tr、td)背景變色 多種解決方案
第一種：
td單元格變色，只用簡單的js代碼即可實現。
很簡潔的代碼，點擊即可運行該代碼
<body>
<table border="1px">
<tr>
<th id="id_item1" οnmοuseοver="this.bgColor='green'" οnmοuseοut="this.bgColor=''">Menu Item1</th>
</tr>
<tr>
<th>Menu Item2</th>
</tr>
</table>
</body>
<body>
<table border="1px">
<tr>
<th id="id_item1" οnmοuseοver="this.bgColor='green'" οnmοuseοut="this.bgColor=''">Menu Item1</th>
</tr>
<tr>
<th>Menu Item2</th>
</tr>
</table>
</body>
第二種：
tr列變色。把鼠標移到一個表格上的時候表格一列的背景變色，可用於論壇列表、新聞發佈系統、後臺等等。提供兩種解決方案。
解決思路：
我們知道，僅變換某個單元格的背景顏色的話用就行了，而要變換一列的背景顏色就必須要取得當前單元格在行中的索引值，然後遍歷表格的所有行，改變行中相應單元格的背景顏色。
具體步驟：
我們知道，僅變換某個單元格的背景顏色的話用就行了，而要變換一列的背景顏色就必須要取得當前單元格在行中的索引值，然後遍歷表格的所有行，改變行中相應單元格的背景顏色。
具體步驟：
方法一：利用表格的相關集合遍歷設置。
1.插入表格代碼
1.插入表格代碼
<table width="200" height="30">
<tr>
<td>demo</td>
<td>demo</td>
<td>demo</td>
</tr>
<tr>
<td>demo</td>
<td>demo</td>
<td>demo</td>
</tr>
<tr>
<td>demo</td>
<td>demo</td>
<td>demo</td>
</tr>
</table>
<tr>
<td>demo</td>
<td>demo</td>
<td>demo</td>
</tr>
<tr>
<td>demo</td>
<td>demo</td>
<td>demo</td>
</tr>
<tr>
<td>demo</td>
<td>demo</td>
<td>demo</td>
</tr>
</table>
2.加入控制背景色功能的JavaScript腳本。
<script>
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<tb.rows.length;i++)
tb.rows[i].cells[td.cellIndex].bgColor=oColor
}
</script>
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<tb.rows.length;i++)
tb.rows[i].cells[td.cellIndex].bgColor=oColor
}
</script>
3.在表格中加入鼠標事件並觸發相應函數後的完全代碼如下：
<script>
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<tb.rows.length;i++)
tb.rows[i].cells[td.cellIndex].bgColor=oColor
}
</script>
<table width="200" height="30" border="1" οnmοuseοver="cells_color()" οnmοuseοut="cells_color()">
<tr>
<td>demo</td>
<td>demo</td>
<td>demo</td>
</tr>
<tr>
<td>demo</td>
<td>demo</td>
<td>demo</td>
</tr>
<tr>
<td>demo</td>
<td>demo</td>
<td>demo</td>
</tr>
</table>
技巧：可以多加一個循環，改變鼠標所在的行的所有單元格背景，腳本修改如下：
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<tb.rows.length;i++)
tb.rows[i].cells[td.cellIndex].bgColor=oColor
}
</script>
<table width="200" height="30" border="1" οnmοuseοver="cells_color()" οnmοuseοut="cells_color()">
<tr>
<td>demo</td>
<td>demo</td>
<td>demo</td>
</tr>
<tr>
<td>demo</td>
<td>demo</td>
<td>demo</td>
</tr>
<tr>
<td>demo</td>
<td>demo</td>
<td>demo</td>
</tr>
</table>
技巧：可以多加一個循環，改變鼠標所在的行的所有單元格背景，腳本修改如下：
<script>
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<tr.cells.length;i++)
tr.cells[i].bgColor=oColor
for(var i=0;i<tb.rows.length;i++)
tb.rows[i].cells[td.cellIndex].bgColor=oColor
}
</script>
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<tr.cells.length;i++)
tr.cells[i].bgColor=oColor
for(var i=0;i<tb.rows.length;i++)
tb.rows[i].cells[td.cellIndex].bgColor=oColor
}
</script>
方法二：利用表格的COL標籤將表格分組實現。
完整代碼：
完整代碼：
<script>
function cells_color(){
var oColor,td=event.srcElement
if(td.tagName!="TD") //如果事件不是發生在單元格上，退出函數
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
}
</script>
<table width="200" height="30" border="1" οnmοuseοver="cells_color()" οnmοuseοut="cells_color()">
<col><col><col>
<tr>
<td>demo</td>
<td>demo</td>
<td>demo</td>
</tr>
<tr>
<td>demo</td>
<td>demo</td>
<td>demo</td>
</tr>
<tr>
<td>demo</td>
<td>demo</td>
<td>demo</td>
</tr>
</table>
function cells_color(){
var oColor,td=event.srcElement
if(td.tagName!="TD") //如果事件不是發生在單元格上，退出函數
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
}
</script>
<table width="200" height="30" border="1" οnmοuseοver="cells_color()" οnmοuseοut="cells_color()">
<col><col><col>
<tr>
<td>demo</td>
<td>demo</td>
<td>demo</td>
</tr>
<tr>
<td>demo</td>
<td>demo</td>
<td>demo</td>
</tr>
<tr>
<td>demo</td>
<td>demo</td>
<td>demo</td>
</tr>
</table>
注意：雖然沒有顯式定義TBODY標籤，但TBODY將爲全部表格自動定義。
特別提示
因爲方法二比方法一少了一個遍歷，所以效果更高。代碼運行後的效果如圖 1.2.37所示。
特別提示
因爲方法二比方法一少了一個遍歷，所以效果更高。代碼運行後的效果如圖 1.2.37所示。
圖 1.2.37 鼠標移上單元格是單元格所在列的背景顏色全部改變
特別說明
特別說明
本例涉及到的知識點比較多，逐一介紹如下：
col 指定基於列的表格默認屬性。
colgroup 指定表格中一列或一組列的默認屬性。
parentElement 獲取對象層次中的父對象。
children 獲取作爲對象直接後代的 DHTML 對象的集合。
backgroundColor 設置或獲取對象的背景顏色。
col 指定基於列的表格默認屬性。
colgroup 指定表格中一列或一組列的默認屬性。
parentElement 獲取對象層次中的父對象。
children 獲取作爲對象直接後代的 DHTML 對象的集合。
backgroundColor 設置或獲取對象的背景顏色。
