 
//點擊當前選中行的時候設(shè)置當前行的顏色，同時恢復(fù)除當前行外的行的顏色及鼠標事件 
function selectRow(target) 
{ 
var sTable = document.getElementById("ServiceListTable") 
for(var i=1;i&lt;sTable.rows.length;i++) //遍歷除第一行外的所有行 
{ 
if (sTable.rows[i] != target) //判斷是否當前選定行 
{ 
sTable.rows[i].bgColor = "#ffffff"; //設(shè)置背景色 
sTable.rows[i].onmouseover = resumeRowOver; //增加onmouseover 事件 
sTable.rows[i].onmouseout = resumeRowOut;//增加onmouseout 事件 
} 
else 
{ 
sTable.rows[i].bgColor = "#d3d3d3"; 
sTable.rows[i].onmouseover = ""; //去除鼠標事件 
sTable.rows[i].onmouseout = ""; //去除鼠標事件 
} 
} 
} 
//移過時tr的背景色 
function rowOver(target) 
{ 
target.bgColor='#e4e4e4'; 
} 
//移出時tr的背景色 
function rowOut(target) 
{ 
target.bgColor='#ffffff'; 
} 
//恢復(fù)tr的的onmouseover事件配套調(diào)用函數(shù) 
function resumeRowOver() 
{ 
rowOver(this); 
} 
//恢復(fù)tr的的onmouseout事件配套調(diào)用函數(shù) 
function resumeRowOut() 
{ 
rowOut(this); 
} 

關(guān)于最后兩個函數(shù)resumeRowOver和resumeRowOut為什么這樣寫參考我之前寫的通過js給頁面元素添加事件
　　對應(yīng)的表格HTML

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

 
<table width="100%" border="0" cellspacing="0" cellpadding="0" id="ServiceListTable"> 
<tr> 
<th>服務(wù)事項</th> 
<th>N</th> 
<th>狀態(tài)</th> 
<th>辦結(jié)</th> 
<th>資料</th> 
</tr> 
<tr onmouseover="rowOver(this)" onmouseout="rowOut(this)" onclick="selectRow(this)"> 
<td>相關(guān)內(nèi)容</td> 
<td align="center">&nbsp;</td> 
<td align="center">&nbsp;</td> 
<td align="center">&nbsp;</td> 
<td align="center">&nbsp;</td> 
</tr> 
<tr onmouseover="rowOver(this)" onmouseout="rowOut(this)" onclick="selectRow(this)"> 
<td>相關(guān)內(nèi)容</td> 
<td align="center">&nbsp;</td> 
<td align="center">&nbsp;</td> 
<td align="center">&nbsp;</td> 
<td align="center">&nbsp;</td> 
</tr> 
<tr onmouseover="rowOver(this)" onmouseout="rowOut(this)" onclick="selectRow(this)"> 
<td>相關(guān)內(nèi)容</td> 
<td align="center">&nbsp;</td> 
<td align="center">&nbsp;</td> 
<td align="center">&nbsp;</td> 
<td align="center">&nbsp;</td> 
</tr> 
<tr onmouseover="rowOver(this)" onmouseout="rowOut(this)" onclick="selectRow(this)"> 
<td>相關(guān)內(nèi)容</td> 
<td align="center">&nbsp;</td> 
<td align="center">&nbsp;</td> 
<td align="center">&nbsp;</td> 
<td align="center">&nbsp;</td> 
</tr> 
</table> 