當(dāng)前位置：軟件學(xué)堂 > 資訊首頁 > 網(wǎng)絡(luò)編程 > 編程其他 > JS代碼實現(xiàn)鼠標(biāo)經(jīng)過表格時列變色

JS代碼實現(xiàn)鼠標(biāo)經(jīng)過表格時列變色

2012/10/31 20:20:11作者：佚名來源：網(wǎng)絡(luò)

移動端

【實例名稱】

JS代碼實現(xiàn)鼠標(biāo)經(jīng)過表格時列變色

【實例描述】

很多例子是講如何在鼠標(biāo)移過時，改變當(dāng)前行的顏色。本例學(xué)習(xí)如何在鼠標(biāo)移時，改變當(dāng)前的顏色。

【實例代碼】

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>標(biāo)題頁-學(xué)無憂（www.denvermotorcycleaccidentlawyer.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="";
//鼠標(biāo)移走時，取消顏色
}
function setColor1(sender)
{
 if(sender.tagName=="TD")
     cols[sender.cellIndex].style.backgroundColor="gray";
//鼠標(biāo)移過來時，改變顏色
}
</script>
</body>
</html>

【運行效果】

運行效果

【難點剖析】

本例的重點是獲取當(dāng)前列。在傳遞事件參數(shù)時，使用“event.fromElement”傳遞當(dāng)前操作的對象。使用“sender．tagName”判斷當(dāng)前操作對象是否是列，如果是，則將當(dāng)前所有列的背景色都改變。
【源碼下載】

如果你不愿復(fù)制代碼及提高代碼準(zhǔn)確性，你可以點擊：鼠標(biāo)經(jīng)過表格時列變色 進行本實例源碼下載