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

本篇作為開發學習筆記之一。
[文]
在web開發中經常遇到需要加亮滑鼠指向的表格行的情況。首先說說一般的情況。
·簡單嘗試
CSS2中允許我們對HTML元素使用hover偽類，這極大的方便了對於表格的樣式的控制。
我們從一個小例子開始：
XHTML（只列出了表格部分，請自行補完頁面，本例在Transational的DTD下通過）： 複製代碼 代碼如下:<table class="datatable" cellspacing="0">
<thead>
<tr>
<th>Item</th>
<th>Value</th>
</tr>
</thead>
<tbody>
<tr class="oddRow">
<td>項目Item1</td>
<td>值Value1</td>
</tr>
<tr class="evenRow">
<td>項目Item2</td>
<td>值Value2</td>
</tr>
<tr class="oddRow">
<td>項目Item3</td>
<td>值Value3</td>
</tr>
<tr class="evenRow">
<td>項目Item4</td>
<td>值Value4</td>
</tr>
<tr class="oddRow">
<td>項目Item5</td>
<td>值Value5</td>
</tr>
<tr class="evenRow">
<td>項目Item6</td>
<td>值Value6</td>
</tr>
</tbody>
</table>

然後用CSS定義了表格的樣式： 複製代碼 代碼如下:.datatable{
margin:15px auto;
width:500px; /*這兩行可以根據需要修改，僅為樣本*/
}
.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元素應用了偽類hover的樣式。這在對CSS2支援的瀏覽器下（IE7+,FF,Opera,Safari等）運作的十分完美。然而CSS1僅提供對於錨元素a的偽類支援，遺憾的是IE6仍然只支援CSS1的偽類。於是我們要進行修改，提供對於IE6的支援。
首先增加一個樣式： 複製代碼 代碼如下:.datatable .trHover,.datatable tr:hover{
background-color:#cfe9f7;
}

此處增加了一個trHover的類，用以修正IE6下的顯示。接下來就是書寫javascript了。最初的想法非常簡單，你不是要滑鼠指向時高亮當前行嗎？於是就對每一行應用javascipt唄。首先寫一個javascript的函數。為了統一我把加亮和撤銷加亮合并到一個函數中了，這樣就可以簡化函數調用，對tr的mouseover和mouseout事件綁定一個函數就行了。 複製代碼 代碼如下:function highlightTr(o){
var regStr=/\b\s*trHover\b/g; /*Regex過濾trHover類*/
if(o.className.indexOf('trHover')==-1)
o.className+=" trHover";
else
o.className=o.className.replace(regStr,"");
}

這裡用到一個小技巧：Regex替換。因為你的tr元素可能有其他樣式（類）——比如本例的evenRow和oddRow，所以不能簡單的在撤銷高亮時把對象的className置空。然後就如大家想象的，給tr綁定事件吧： 複製代碼 代碼如下:<tr class="oddRow" onmouseover="highlightTr();" onmouseout="hightlightTr();">
<td>項目Item1</td>
<td>值Value1</td>
</tr>

給所有的tr寫上事件綁定就可以了。然而這樣做也有問題：1、增加了頁面的代碼量。2、如果表格是由後台服務端程式輸出的，有時不允許你給tr元素繫結javascript函數。怎麼辦？直接的想，可以用js在頁面某範圍裡搜尋該樣式的表格，然後綁定tr的事件。不過我們今天換個思路，直接對table元素繫結js事件，實現對某一行的高亮！
這種想法是有根據的。這不得不說說瀏覽器的事件模型。由於曆史原因，各種瀏覽器在實現javascript事件響應上有差異，然而基本思路還是一致的。js事件在W3C DOM中被描述成捕獲-冒泡模型。簡單的說有點像下餃子，餃子逐漸沉到鍋底，接受了熱傳遞，慢慢漂到上面。回到模型本身，javascript事件有兩大類，首先從最外層的元素捕獲事件，逐漸向內傳遞到觸發事件的元素——這叫事件捕獲，然後再逐漸向外擴充到外層元素——這叫做事件冒泡。IE的實現不支援捕獲類型的事件，對冒泡型事件的實現與W3C DOM標準也略有區別，但總體思路是一樣的。
說了半天，我們這次就是想用事件的冒泡處理機制來達到高亮表格行的目的。
再次重申，冒泡事件是從觸發javascript事件的最內層元素擴散到外層的，就像石子激起的漣漪一樣。滑鼠滑過某一行，首先最內層元素比如td裡的文本或者其他元素觸發mouseover，接下來傳到td-->tr-->tbody-->table依次響應mouseover事件，滑鼠移出時，也有這種依次冒泡的過程。這就是我們這樣處理事件響應程式的根據。
首先，我們需要修改XHMTL中的事件綁定代碼。去掉tr元素中mouseover和mouseout的事件處理，隨後給table加上事件處理。最後表格變成這樣： 複製代碼 代碼如下:<table class="datatable" cellspacing="0" onmouseover="highlightTr();" onmouseout="highlightTr();">
<thead>
<tr>
<th>Item</th>
<th>Value</th>
</tr>
</thead>
<tbody>
<tr class="oddRow">
<td>項目Item1</td>
<td>值Value1</td>
</tr>
<tr class="evenRow">
<td>項目Item2</td>
<td>值Value2</td>
</tr>
<tr class="oddRow">
<td>項目Item3</td>
<td>值Value3</td>
</tr>
<tr class="evenRow">
<td>項目Item4</td>
<td>值Value4</td>
</tr>
<tr class="oddRow">
<td>項目Item5</td>
<td>值Value5</td>
</tr>
<tr class="evenRow">
<td>項目Item6</td>
<td>值Value6</td>
</tr>
</tbody>
</table>

和最初我們寫的表格相比，只多了table元素的js事件綁定。接下來就是給我們的hightlightTr函數做個大手術了！這裡先把最終的代碼貼出來然後一起分析： 複製代碼 代碼如下:<script type="text/javascript">
//<!-[CDATA[
//該函數修正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、處理事件，獲得觸發javascript事件的頁面元素。2、尋找它的父節點，直到找到tr。3、進行樣式處理。
值得說的就是獲得觸發事件元素的部分考慮了瀏覽器安全色性。IE的事件模型裡window對象有一個event屬性，而W3C DOM標準event對象必須作為唯一參數傳給事件處理函數，於是它便存在於函數的一個隱藏的參數（在參數列表第0個）裡。接下來就是防止異常的一些判斷之類的了。最終實現還是由修改元素樣式表來完成。
至此整個相容不同瀏覽器的高亮表格行的旅行結束了（好長的定語-口-）。很好玩吧~ 文中難免疏漏差錯，如果對本文有建議或意見歡迎批評指正~ ^_^