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

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

移動(dòng)端

【實(shí)例名稱】

【實(shí)例描述】

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

【實(shí)例代碼】

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

【運(yùn)行效果】

運(yùn)行效果

【難點(diǎn)剖析】

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

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

標(biāo)簽： JS代碼表格變色