鼠標懸停改變table的行背景色（相繼加手型光標和單擊事件）

一、需求背景

    ssh項目從數據庫查詢數據展示，往往jsp頁面做一個table標籤，通過<s:iterator>標籤遍歷生成多個tr標籤；

往往還需要查看該行的具體信息等其他相關操作。

二、需求效果：

1、當鼠標懸停在某行，該行背景色改變；

2、緊接着類似<a></a>標籤一樣，光標變成手型，單擊後跳轉到指定頁面；

3、當鼠標離開後，背景色還原。

三、具體代碼

1、js部分代碼：

<script type="text/javascript">
$(function(){
//鼠標懸停背景色
	var col="";
    //$("#tb tr")--選擇id爲tb的table，再選擇該table的行tr
    // mouseover--鼠標放上去的事件（懸停）
    //$("#tb tr").mouseover();--給tb的行tr添加鼠標懸停事件
    //slice(1)選擇從第二行開始（標題行不需要懸停變色）
    $("#tab tr").slice(1).mouseover(function(){
    	col=$(this).css("background-color");//獲取初始背景色
        $(this).css({background: "#99b3ff" });//添加背景色，$(this)表示當前選擇的元素。
    });
    // mouseout--鼠標離開的事件
    $("#tab tr").slice(1).mouseout(function(){
        $(this).css("background-color",col);//設置成初始背景色
    });
    
//給第2到第4個td加手型光標和單擊事件
    $("#tab tr").slice(1).each(function() {//獲取除第一個外的所有tr,each遍歷所有的td
    	 $(this).find("td").slice(1,5).mouseover(function(){//獲取tr的第2到第4個td,給懸停事件
    		 	var rowId=$(this).parent().attr("rel");//獲取該行的id，即rel的屬性值
    		 	var url="${ctx}/toReadMail.action?mail.id="+rowId;
    		 	var result="window.location.href="+"\""+url+"\"";
    	    	$(this).css("cursor","pointer");//出現手型
    	    	$(this).attr("onclick",result);//添加一個單擊事件
    	    });
	});
});
</script>

2、jsp部分代碼：

<table width="90%" border="1px" cellspacing="0" cellpadding="0" id="tab">
						<tr >
							<th align="left" width="10%" >
							<div class="container">
								<span>
									<input type="checkbox" name="allids" class="inputCheck" id="allids">
									<label for="allids" id="lab_ids"></label>
								</span> 全選
							</div> 
							<!-- <input type="checkbox" name="allids" value="" id="allids" class="allids" /> 全選 -->
							</th>
							<th align="center" width="20%" >郵件標題</th>
							<th align="center" width="35%" >郵件內容</th>
							<th align="center" width="10%" >閱讀狀態</th>
							<th align="center" width="15%" >發送時間</th>
							<th align="center" width="10%" >操作</th>
						</tr>
						<s:iterator value="pager.pageRecords" status="sta">
							<tr <s:if test="#sta.odd">style="background:#eee;"</s:if> rel="<s:property value='id' />">
								<td align="center" height="18px">
									<div class="container">
										<span>
											<input type="checkbox" name="ids" id="ids<s:property value='id' />" class="inputCheck" 
												value="<s:property value='id' />" >
											<label for="ids<s:property value='id' />" id="lab"></label>
										</span>
									</div> 
								<%-- <input type="checkbox" name="ids" value="<s:property value='id' />" id="ids"/> --%>
								</td>
								<td align="center" height="18px" style="white-space: nowrap;<s:if test="readStatus==1">font-weight:normal;</s:if>"><!-- 不換行顯示 -->
									<%-- <a href="${ctx}/toReadMail.action?mail.id=<s:property value="id"/>"> --%>
										<s:property value="mailTitle" />
									<!-- </a> -->
								</td>
								<td align="center" height="18px" style="white-space: nowrap;<s:if test="readStatus==1">font-weight:normal;</s:if>">
									<s:property value="mailContent" />
								</td>
								<td align="center" height="18px">
									<s:if test="readStatus==0"><span style="font-weight: bold;">未讀</span></s:if> 
									<s:if test="readStatus==1">已讀</s:if>
								</td>
								<td align="center" height="18px">
									<s:date name="sendTime" format="yyyy-MM-dd" />
								</td>
								<td align="center" height="18px">
									<a href="javascript:void(0);" class="delete" rel="<s:property value="id"/>">[刪除]</a>
								</td>
							</tr>
						</s:iterator>
					</table>

四、效果

效果出來了，只是截圖軟件截不到手型光標。