快捷導(dǎo)航

高亮顯示web頁表格行的javascript代碼

更新時間：2010年11月19日 19:40:23 作者：

本文從簡單的css高亮顯示表格的某一行說開去，探討了在不同瀏覽器下對于高亮功能的兼容性。闡述針對表格本身綁定javascript事件實(shí)現(xiàn)這一功能的方法。

本篇作為開發(fā)學(xué)習(xí)筆記之一。
[文]
在web開發(fā)中經(jīng)常遇到需要加亮鼠標(biāo)指向的表格行的情況。首先說說一般的情況。
·簡單嘗試
CSS2中允許我們對HTML元素使用hover偽類，這極大的方便了對于表格的樣式的控制。
我們從一個小例子開始：
XHTML（只列出了表格部分，請自行補(bǔ)完頁面，本例在Transational的DTD下通過）：

復(fù)制代碼代碼如下:

 
<table class="datatable" cellspacing="0"> 
<thead> 
<tr> 
<th>Item</th> 
<th>Value</th> 
</tr> 
</thead> 
<tbody> 
<tr class="oddRow"> 
<td>項(xiàng)目Item1</td> 
<td>值Value1</td> 
</tr> 
<tr class="evenRow"> 
<td>項(xiàng)目Item2</td> 
<td>值Value2</td> 
</tr> 
<tr class="oddRow"> 
<td>項(xiàng)目Item3</td> 
<td>值Value3</td> 
</tr> 
<tr class="evenRow"> 
<td>項(xiàng)目Item4</td> 
<td>值Value4</td> 
</tr> 
<tr class="oddRow"> 
<td>項(xiàng)目Item5</td> 
<td>值Value5</td> 
</tr> 
<tr class="evenRow"> 
<td>項(xiàng)目Item6</td> 
<td>值Value6</td> 
</tr> 
</tbody> 
</table> 

然后用CSS定義了表格的樣式：

復(fù)制代碼代碼如下:

 
.datatable{ 
margin:15px auto; 
width:500px; /*這兩行可以根據(jù)需要修改，僅為示例*/ 
} 
.datatable,.datatable tr,.datatable td,.datatable th,.datatable .tableheader td{ 
border:1px #0073ac solid; 
border-collapse:collapse; 
padding:3px; 
} 
.datatable .tableheader td,.datatable th{ 
font-weight:bold; 
background:#fff url(images/thead.png) repeat-x; 
padding:8px 5px; 
} 
.datatable tr:hover{ 
background-color:#cfe9f7; 
} 

對于css的部分，不做過多解釋。請注意最后加粗的部分，對tr元素應(yīng)用了偽類hover的樣式。這在對CSS2支持的瀏覽器下（IE7+,FF,Opera,Safari等）運(yùn)作的十分完美。然而CSS1僅提供對于錨元素a的偽類支持，遺憾的是IE6仍然只支持CSS1的偽類。于是我們要進(jìn)行修改，提供對于IE6的支持。
首先增加一個樣式：

復(fù)制代碼代碼如下:

 
.datatable .trHover,.datatable tr:hover{ 
background-color:#cfe9f7; 
} 

此處增加了一個trHover的類，用以修正IE6下的顯示。接下來就是書寫javascript了。最初的想法非常簡單，你不是要鼠標(biāo)指向時高亮當(dāng)前行么？于是就對每一行應(yīng)用javascipt唄。首先寫一個javascript的函數(shù)。為了統(tǒng)一我把加亮和撤銷加亮合并到一個函數(shù)中了，這樣就可以簡化函數(shù)調(diào)用，對tr的mouseover和mouseout事件綁定一個函數(shù)就行了。

復(fù)制代碼代碼如下:

 
function highlightTr(o){ 
var regStr=/\b\s*trHover\b/g; /*正則表達(dá)式過濾trHover類*/ 
if(o.className.indexOf('trHover')==-1) 
o.className+=" trHover"; 
else 
o.className=o.className.replace(regStr,""); 
} 

這里用到一個小技巧：正則表達(dá)式替換。因?yàn)槟愕膖r元素可能有其他樣式（類）——比如本例的evenRow和oddRow，所以不能簡單的在撤銷高亮?xí)r把對象的className置空。然后就如大家想象的，給tr綁定事件吧：

復(fù)制代碼代碼如下:

 
<tr class="oddRow" onmouseover="highlightTr();" onmouseout="hightlightTr();"> 
<td>項(xiàng)目Item1</td> 
<td>值Value1</td> 
</tr> 

給所有的tr寫上事件綁定就可以了。然而這樣做也有問題：1、增加了頁面的代碼量。2、如果表格是由后臺服務(wù)端程序輸出的，有時不允許你給tr元素綁定javascript函數(shù)。怎么辦？直接的想，可以用js在頁面某范圍里搜索該樣式的表格，然后綁定tr的事件。不過我們今天換個思路，直接對table元素綁定js事件，實(shí)現(xiàn)對某一行的高亮！
這種想法是有根據(jù)的。這不得不說說瀏覽器的事件模型。由于歷史原因，各種瀏覽器在實(shí)現(xiàn)javascript事件響應(yīng)上有差異，然而基本思路還是一致的。js事件在W3C DOM中被描述成捕獲-冒泡模型。簡單的說有點(diǎn)像下餃子，餃子逐漸沉到鍋底，接受了熱傳遞，慢慢漂到上面。回到模型本身，javascript事件有兩大類，首先從最外層的元素捕獲事件，逐漸向內(nèi)傳遞到觸發(fā)事件的元素——這叫事件捕獲，然后再逐漸向外擴(kuò)展到外層元素——這叫做事件冒泡。IE的實(shí)現(xiàn)不支持捕獲類型的事件，對冒泡型事件的實(shí)現(xiàn)與W3C DOM標(biāo)準(zhǔn)也略有區(qū)別，但總體思路是一樣的。
說了半天，我們這次就是想用事件的冒泡處理機(jī)制來達(dá)到高亮表格行的目的。
再次重申，冒泡事件是從觸發(fā)javascript事件的最內(nèi)層元素擴(kuò)散到外層的，就像石子激起的漣漪一樣。鼠標(biāo)滑過某一行，首先最內(nèi)層元素比如td里的文本或者其他元素觸發(fā)mouseover，接下來傳到td-->tr-->tbody-->table依次響應(yīng)mouseover事件，鼠標(biāo)移出時，也有這種依次冒泡的過程。這就是我們這樣處理事件響應(yīng)程序的根據(jù)。
首先，我們需要修改XHMTL中的事件綁定代碼。去掉tr元素中mouseover和mouseout的事件處理，隨后給table加上事件處理。最后表格變成這樣：

復(fù)制代碼代碼如下:

 
<table class="datatable" cellspacing="0" onmouseover="highlightTr();" onmouseout="highlightTr();"> 
<thead> 
<tr> 
<th>Item</th> 
<th>Value</th> 
</tr> 
</thead> 
<tbody> 
<tr class="oddRow"> 
<td>項(xiàng)目Item1</td> 
<td>值Value1</td> 
</tr> 
<tr class="evenRow"> 
<td>項(xiàng)目Item2</td> 
<td>值Value2</td> 
</tr> 
<tr class="oddRow"> 
<td>項(xiàng)目Item3</td> 
<td>值Value3</td> 
</tr> 
<tr class="evenRow"> 
<td>項(xiàng)目Item4</td> 
<td>值Value4</td> 
</tr> 
<tr class="oddRow"> 
<td>項(xiàng)目Item5</td> 
<td>值Value5</td> 
</tr> 
<tr class="evenRow"> 
<td>項(xiàng)目Item6</td> 
<td>值Value6</td> 
</tr> 
</tbody> 
</table> 

和最初我們寫的表格相比，只多了table元素的js事件綁定。接下來就是給我們的hightlightTr函數(shù)做個大手術(shù)了！這里先把最終的代碼貼出來然后一起分析：

復(fù)制代碼代碼如下:

 
<script type="text/javascript"> 
//<!-[CDATA[ 
//該函數(shù)修正IE6不能識別TR元素hover偽類的bug 
function highlightTr(){ 
var theEvent=window.event||arguments.callee.caller.arguments[0]; 
var srcElement = theEvent.srcElement; 
if (!srcElement) 
{ 
srcElement = theEvent.target; 
} 
if(!srcElement.parentNode) return false; 
var o=srcElement.parentNode; 
while(o.parentNode&&o.tagName!="TR") 
{ 
if(o.tagName=="TABLE") break; 
else o=o.parentNode; 
} 
var regStr=/\b\s*trHover\b/g; 
if(o.className.indexOf('trHover')==-1) 
o.className+=" trHover"; 
else 
o.className=o.className.replace(regStr,""); 
} 
//]]> 
</script> 

修改后的hightlighTr的版本的思路是這樣的：1、處理事件，獲得觸發(fā)javascript事件的頁面元素。2、尋找它的父節(jié)點(diǎn)，直到找到tr。3、進(jìn)行樣式處理。
值得說的就是獲得觸發(fā)事件元素的部分考慮了瀏覽器兼容性。IE的事件模型里window對象有一個event屬性，而W3C DOM標(biāo)準(zhǔn)event對象必須作為唯一參數(shù)傳給事件處理函數(shù)，于是它便存在于函數(shù)的一個隱藏的參數(shù)（在參數(shù)列表第0個）里。接下來就是防止異常的一些判斷之類的了。最終實(shí)現(xiàn)還是由修改元素樣式表來完成。
至此整個兼容不同瀏覽器的高亮表格行的旅行結(jié)束了（好長的定語-口-）。很好玩吧~ 文中難免疏漏差錯，如果對本文有建議或意見歡迎批評指正~ ^_^

您可能感興趣的文章: